<!-- The exported code uses Tailwind CSS. Install Tailwind CSS in your dev environment to ensure all styles work. -->
<template>
    <div class="min-h-screen bg-gray-50">
        <!-- 风险评估模态框 -->
        <div v-if="showAssessmentModal"
            class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
            <div class="bg-white rounded-lg w-3/4 max-w-3xl max-h-[80vh] overflow-y-auto">
                <div class="p-6">
                    <div class="flex justify-between items-center mb-6">
                        <h2 class="text-2xl font-bold text-gray-800">风险评估</h2>
                        <button @click="showAssessmentModal = false" class="text-gray-500 hover:text-gray-700">
                            <i class="fas fa-times text-xl"></i>
                        </button>
                    </div>
                    <!-- 风险基本信息 -->
                    <div class="bg-gray-50 p-4 rounded-lg mb-6">
                        <h3 class="text-lg font-semibold text-gray-800 mb-4">风险基本信息</h3>
                        <div class="grid grid-cols-2 gap-4">
                            <div>
                                <p class="text-sm text-gray-500">风险编号</p>
                                <p class="text-base text-gray-900">{{ assessmentRisk.id }}</p>
                            </div>
                            <div>
                                <p class="text-sm text-gray-500">风险类型</p>
                                <div class="flex items-center">
                                    <div class="w-6 h-6 rounded-full flex items-center justify-center mr-2"
                                        :class="assessmentRisk.iconBg">
                                        <i :class="assessmentRisk.icon + ' text-white text-xs'"></i>
                                    </div>
                                    <p class="text-base text-gray-900">{{ assessmentRisk.type }}</p>
                                </div>
                            </div>
                            <div class="col-span-2">
                                <p class="text-sm text-gray-500">风险描述</p>
                                <p class="text-base text-gray-900">{{ assessmentRisk.description }}</p>
                            </div>
                        </div>
                    </div>
                    <!-- 评估表单 -->
                    <form @submit.prevent="submitAssessment" class="space-y-6">
                        <div class="grid grid-cols-2 gap-6">
                            <!-- 可能性评分 -->
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">可能性评分</label>
                                <div class="relative">
                                    <button type="button" @click="toggleProbabilityDropdown"
                                        class="w-full flex items-center justify-between bg-gray-100 text-gray-700 px-4 py-2 rounded text-sm !rounded-button whitespace-nowrap cursor-pointer">
                                        <span>{{ probabilityOptions[assessmentForm.probability - 1]?.label || '请选择'
                                            }}</span>
                                        <i class="fas fa-chevron-down text-xs"></i>
                                    </button>
                                    <div v-if="showProbabilityDropdown"
                                        class="absolute z-10 w-full mt-1 bg-white rounded-md shadow-lg">
                                        <div class="py-1">
                                            <button v-for="option in probabilityOptions" :key="option.value"
                                                type="button" @click="selectProbability(option.value)"
                                                class="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                                                {{ option.label }}
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- 影响程度评分 -->
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">影响程度评分</label>
                                <div class="relative">
                                    <button type="button" @click="toggleImpactDropdown"
                                        class="w-full flex items-center justify-between bg-gray-100 text-gray-700 px-4 py-2 rounded text-sm !rounded-button whitespace-nowrap cursor-pointer">
                                        <span>{{ impactOptions[assessmentForm.impact - 1]?.label || '请选择' }}</span>
                                        <i class="fas fa-chevron-down text-xs"></i>
                                    </button>
                                    <div v-if="showImpactDropdown"
                                        class="absolute z-10 w-full mt-1 bg-white rounded-md shadow-lg">
                                        <div class="py-1">
                                            <button v-for="option in impactOptions" :key="option.value" type="button"
                                                @click="selectImpact(option.value)"
                                                class="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                                                {{ option.label }}
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- 评估理由 -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">评估理由</label>
                            <textarea v-model="assessmentForm.reason" rows="4"
                                class="w-full px-4 py-2 text-sm text-gray-700 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                                placeholder="请详细描述评估理由..." maxlength="500"></textarea>
                            <div class="text-xs text-gray-500 mt-1">{{ assessmentForm.reason.length }}/500</div>
                        </div>
                        <!-- 评估人信息 -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">评估人</label>
                            <input type="text" v-model="assessmentForm.assessor"
                                class="w-full px-4 py-2 text-sm text-gray-700 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                                placeholder="请输入评估人姓名">
                        </div>
                        <!-- 风险评分结果 -->
                        <div v-if="assessmentForm.probability && assessmentForm.impact"
                            class="bg-blue-50 p-4 rounded-lg">
                            <h4 class="text-sm font-medium text-blue-800 mb-2">评估结果预览</h4>
                            <div class="grid grid-cols-3 gap-4">
                                <div>
                                    <p class="text-xs text-blue-600">风险评分</p>
                                    <p class="text-lg font-bold text-blue-900">{{ calculateRiskScore }}</p>
                                </div>
                                <div>
                                    <p class="text-xs text-blue-600">风险等级</p>
                                    <span class="px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full"
      :class="assessmentForm.probability && assessmentForm.impact ? getRiskLevelClass(calculateRiskLevel(assessmentForm.probability, assessmentForm.impact)) : 'bg-gray-100 text-gray-800'">
    {{ assessmentForm.probability && assessmentForm.impact ? calculateRiskLevel(assessmentForm.probability, assessmentForm.impact) : '未评估' }}
</span>
                                </div>
                            </div>
                        </div>
                        <div class="flex justify-end space-x-4 pt-4">
                            <button type="button" @click="showAssessmentModal = false"
                                class="px-4 py-2 bg-gray-100 text-gray-700 rounded hover:bg-gray-200 !rounded-button whitespace-nowrap cursor-pointer">
                                取消
                            </button>
                            <button type="submit" :disabled="!isFormValid"
                                class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed !rounded-button whitespace-nowrap cursor-pointer">
                                提交评估
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- 新增评估功能模态框 -->
        <div v-if="showNewAssessmentModal"
            class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
            <div class="bg-white rounded-lg w-3/4 max-w-5xl max-h-[90vh] overflow-y-auto">
                <div class="p-6">
                    <div class="flex justify-between items-center mb-6">
                        <h2 class="text-2xl font-bold text-gray-800">智能风险评估</h2>
                        <button @click="closeNewAssessmentModal" class="text-gray-500 hover:text-gray-700">
                            <i class="fas fa-times text-xl"></i>
                        </button>
                    </div>

                    <!-- 评估方式选择 -->
                    <div class="mb-6">
                        <h3 class="text-lg font-semibold mb-4">选择评估方式</h3>
                        <div class="grid grid-cols-3 gap-4">
                            <div @click="newAssessmentType = 'manual'"
                                :class="['p-4 border-2 rounded-lg cursor-pointer transition-all',
                                    newAssessmentType === 'manual' ? 'border-blue-500 bg-blue-50' : 'border-gray-200 hover:border-gray-300']">
                                <div class="text-center">
                                    <i class="fas fa-edit text-2xl mb-2 text-blue-600"></i>
                                    <h4 class="font-medium">手动评估</h4>
                                    <p class="text-sm text-gray-600 mt-1">基于专家经验进行风险评估</p>
                                </div>
                            </div>
                            <div @click="newAssessmentType = 'template'"
                                :class="['p-4 border-2 rounded-lg cursor-pointer transition-all',
                                    newAssessmentType === 'template' ? 'border-blue-500 bg-blue-50' : 'border-gray-200 hover:border-gray-300']">
                                <div class="text-center">
                                    <i class="fas fa-clipboard-list text-2xl mb-2 text-green-600"></i>
                                    <h4 class="font-medium">模板评估</h4>
                                    <p class="text-sm text-gray-600 mt-1">使用预设模板快速评估</p>
                                </div>
                            </div>
                            <div @click="newAssessmentType = 'ai'"
                                :class="['p-4 border-2 rounded-lg cursor-pointer transition-all',
                                    newAssessmentType === 'ai' ? 'border-blue-500 bg-blue-50' : 'border-gray-200 hover:border-gray-300']">
                                <div class="text-center">
                                    <i class="fas fa-robot text-2xl mb-2 text-purple-600"></i>
                                    <h4 class="font-medium">AI智能评估</h4>
                                    <p class="text-sm text-gray-600 mt-1">基于AI算法自动评估</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 手动评估表单 -->
                    <div v-if="newAssessmentType === 'manual'" class="space-y-6">
                        <form @submit.prevent="submitNewAssessment">
                            <div class="grid grid-cols-2 gap-6">
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">风险描述</label>
                                    <textarea v-model="newAssessmentForm.description"
                                        class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                        rows="3" placeholder="请详细描述风险内容"></textarea>
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">风险领域</label>
                                    <select v-model="newAssessmentForm.area"
                                        class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                        <option value="">请选择风险领域</option>
                                        <option value="财务风险">财务风险</option>
                                        <option value="运营风险">运营风险</option>
                                        <option value="合规风险">合规风险</option>
                                        <option value="技术风险">技术风险</option>
                                        <option value="市场风险">市场风险</option>
                                        <option value="信用风险">信用风险</option>
                                    </select>
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">发生可能性</label>
                                    <select v-model="newAssessmentForm.probability"
                                        class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                        <option value="">请选择可能性</option>
                                        <option value="1">极低 (0-5%)</option>
                                        <option value="2">低 (5-25%)</option>
                                        <option value="3">中等 (25-50%)</option>
                                        <option value="4">高 (50-75%)</option>
                                        <option value="5">极高 (75-100%)</option>
                                    </select>
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">影响程度</label>
                                    <select v-model="newAssessmentForm.impact"
                                        class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                        <option value="">请选择影响程度</option>
                                        <option value="1">轻微 (损失&lt;10万)</option>
                                        <option value="2">较小 (损失10-50万)</option>
                                        <option value="3">中等 (损失50-100万)</option>
                                        <option value="4">严重 (损失100-500万)</option>
                                        <option value="5">灾难性 (损失>500万)</option>
                                    </select>
                                </div>
                            </div>

                            <!-- 评估结果预览 -->
                            <div v-if="newAssessmentForm.probability && newAssessmentForm.impact"
                                class="mt-6 bg-blue-50 p-4 rounded-lg">
                                <h4 class="text-sm font-medium text-blue-800 mb-3">评估结果预览</h4>
                                <div class="grid grid-cols-4 gap-4">
                                    <div>
                                        <p class="text-xs text-blue-600">风险评分</p>
                                        <p class="text-lg font-bold text-blue-900">{{ calculateNewRiskScore }}</p>
                                    </div>
                                    <div>
                                        <p class="text-xs text-blue-600">风险等级</p>
                                        <span class="px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full"
      :class="newAssessmentForm.probability && newAssessmentForm.impact ? getRiskLevelClass(calculateRiskLevel(newAssessmentForm.probability, newAssessmentForm.impact)) : 'bg-gray-100 text-gray-800'">
    {{ newAssessmentForm.probability && newAssessmentForm.impact ? calculateRiskLevel(newAssessmentForm.probability, newAssessmentForm.impact) : '未评估' }}
</span>
                                    </div>
                                    <div>
                                        <p class="text-xs text-blue-600">建议措施</p>
                                        <p class="text-sm text-blue-800">{{ calculateNewRiskLevel.suggestion }}</p>
                                    </div>
                                    <div>
                                        <p class="text-xs text-blue-600">优先级</p>
                                        <span class="px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full"
                                            :class="calculateNewRiskLevel.priorityClass">
                                            {{ calculateNewRiskLevel.priority }}
                                        </span>
                                    </div>
                                </div>
                            </div>

                            <div class="flex justify-end space-x-4 mt-6">
                                <button type="button" @click="closeNewAssessmentModal"
                                    class="px-4 py-2 bg-gray-100 text-gray-700 rounded hover:bg-gray-200 !rounded-button whitespace-nowrap cursor-pointer">
                                    取消
                                </button>
                                <button type="submit" :disabled="!isNewFormValid"
                                    class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed !rounded-button whitespace-nowrap cursor-pointer">
                                    提交评估
                                </button>
                            </div>
                        </form>
                    </div>

                    <!-- 模板评估 -->
                    <div v-if="newAssessmentType === 'template'" class="space-y-6">
                        <h3 class="text-lg font-semibold">选择评估模板</h3>
                        <div class="grid grid-cols-2 gap-4">
                            <div v-for="template in assessmentTemplates" :key="template.id"
                                @click="selectTemplate(template)"
                                :class="['p-4 border border-gray-200 rounded-lg hover:border-blue-300 cursor-pointer transition-all', (selectedTemplate && selectedTemplate.id === template.id) ? 'border-blue-500 ring-2 ring-blue-200' : '']">
                                <h4 class="font-medium text-gray-800">{{ template.name }}</h4>
                                <p class="text-sm text-gray-600 mt-1">{{ template.description }}</p>
                                <div class="mt-2 flex items-center space-x-2">
                                    <span class="text-xs bg-gray-100 px-2 py-1 rounded">{{ template.category }}</span>
                                    <span class="text-xs text-gray-500">{{ template.riskCount }}个风险项</span>
                                </div>
                            </div>
                        </div>

                        <!-- 模板风险项列表 -->
                        <div v-if="selectedTemplate && templateAssessmentResults.length" class="space-y-4">
                            <h4 class="text-lg font-semibold">模板风险项</h4>
                            <div class="space-y-3">
                                <div v-for="result in templateAssessmentResults" :key="result.id"
                                    class="p-4 border border-gray-200 rounded-lg">
                                    <div class="flex justify-between items-start">
                                        <div class="flex-1">
                                            <h5 class="font-medium text-gray-800">{{ result.description }}</h5>
                                            <p class="text-sm text-gray-600 mt-1">{{ result.area }}</p>
                                            <div class="mt-2 flex items-center space-x-4">
                                                <span class="text-xs bg-gray-100 px-2 py-1 rounded">可能性: {{ result.probability }}/5</span>
                                                <span class="text-xs bg-gray-100 px-2 py-1 rounded">影响: {{ result.impact }}/5</span>
                                                <span
                                                    class="px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full"
                                                    :class="result.riskLevelClass">
                                                    {{ result.riskLevel }}
                                                </span>
                                            </div>
                                        </div>
                                        <div class="ml-4">
                                            <input type="checkbox" v-model="result.selected" class="rounded">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <button @click="submitTemplateAssessment" :disabled="!templateAssessmentResults.some(r => r.selected)"
                                class="w-full py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed">
                                添加选中的风险评估
                            </button>
                        </div>
                    </div>

                    <!-- AI智能评估 -->
                    <div v-if="newAssessmentType === 'ai'" class="space-y-6">
                        <div class="bg-gradient-to-r from-purple-50 to-blue-50 p-6 rounded-lg">
                            <h3 class="text-lg font-semibold text-purple-800 mb-4">AI智能风险评估</h3>
                            <div class="space-y-4">
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">业务描述</label>
                                    <textarea v-model="aiAssessmentForm.businessDescription"
                                        class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
                                        rows="3" placeholder="请描述您的业务场景，AI将自动识别潜在风险"></textarea>
                                </div>
                                <div class="grid grid-cols-2 gap-4">
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-2">行业类型</label>
                                        <select v-model="aiAssessmentForm.industry"
                                            class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500">
                                            <option value="">请选择行业</option>
                                            <option value="金融">金融服务</option>
                                            <option value="制造">制造业</option>
                                            <option value="零售">零售业</option>
                                            <option value="科技">科技行业</option>
                                            <option value="医疗">医疗健康</option>
                                            <option value="教育">教育培训</option>
                                        </select>
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-2">公司规模</label>
                                        <select v-model="aiAssessmentForm.companySize"
                                            class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500">
                                            <option value="">请选择规模</option>
                                            <option value="small">小型 (&lt;100人)</option>
                                            <option value="medium">中型 (100-1000人)</option>
                                            <option value="large">大型 (>1000人)</option>
                                        </select>
                                    </div>
                                </div>
                                <button @click="startAIAssessment" :disabled="!aiAssessmentForm.businessDescription"
                                    class="w-full py-3 bg-gradient-to-r from-purple-600 to-blue-600 text-white rounded-lg hover:from-purple-700 hover:to-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-all">
                                    <i class="fas fa-magic mr-2"></i>开始AI智能评估
                                </button>
                            </div>
                        </div>

                        <!-- AI评估结果 -->
                        <div v-if="aiAssessmentResults.length > 0" class="space-y-4">
                            <h4 class="text-lg font-semibold">AI评估结果</h4>
                            <div class="space-y-3">
                                <div v-for="result in aiAssessmentResults" :key="result.id"
                                    class="p-4 border border-gray-200 rounded-lg">
                                    <div class="flex justify-between items-start">
                                        <div class="flex-1">
                                            <h5 class="font-medium text-gray-800">{{ result.description }}</h5>
                                            <p class="text-sm text-gray-600 mt-1">{{ result.area }}</p>
                                            <div class="mt-2 flex items-center space-x-4">
                                                <span class="text-xs bg-gray-100 px-2 py-1 rounded">可能性: {{
                                                    result.probability }}/5</span>
                                                <span class="text-xs bg-gray-100 px-2 py-1 rounded">影响: {{ result.impact
                                                    }}/5</span>
                                                <span
                                                    class="px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full"
                                                    :class="result.riskLevelClass">
                                                    {{ result.riskLevel }}
                                                </span>
                                            </div>
                                        </div>
                                        <div class="ml-4">
                                            <input type="checkbox" v-model="result.selected" class="rounded">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <button @click="submitAIAssessment" :disabled="!aiAssessmentResults.some(r => r.selected)"
                                class="w-full py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed">
                                添加选中的风险评估
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 风险详情模态框 -->
        <div v-if="showRiskModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
            <div class="bg-white rounded-lg w-3/4 max-w-4xl max-h-[80vh] overflow-y-auto">
                <div class="p-6">
                    <div class="flex justify-between items-center mb-6">
                        <h2 class="text-2xl font-bold text-gray-800">风险详情</h2>
                        <button @click="showRiskModal = false" class="text-gray-500 hover:text-gray-700">
                            <i class="fas fa-times text-xl"></i>
                        </button>
                    </div>
                    <div class="space-y-6">
                        <!-- 基本信息 -->
                        <div class="bg-gray-50 p-4 rounded-lg">
                            <h3 class="text-lg font-semibold text-gray-800 mb-4">基本信息</h3>
                            <div class="grid grid-cols-2 gap-4">
                                <div>
                                    <p class="text-sm text-gray-500">风险编号</p>
                                    <p class="text-base text-gray-900">{{ selectedRisk.id }}</p>
                                </div>
                                <div>
                                    <p class="text-sm text-gray-500">风险类型</p>
                                    <div class="flex items-center">
                                        <div class="w-6 h-6 rounded-full flex items-center justify-center mr-2"
                                            :class="selectedRisk.iconBg">
                                            <i :class="selectedRisk.icon + ' text-white text-xs'"></i>
                                        </div>
                                        <p class="text-base text-gray-900">{{ selectedRisk.type }}</p>
                                    </div>
                                </div>
                                <div class="col-span-2">
                                    <p class="text-sm text-gray-500">风险描述</p>
                                    <p class="text-base text-gray-900">{{ selectedRisk.description }}</p>
                                </div>
                                <div>
                                    <p class="text-sm text-gray-500">影响区域</p>
                                    <p class="text-base text-gray-900">{{ selectedRisk.area }} - {{
                                        selectedRisk.location }}</p>
                                </div>
                                <div>
                                    <p class="text-sm text-gray-500">发现时间</p>
                                    <p class="text-base text-gray-900">{{ selectedRisk.date }} {{ selectedRisk.time }}
                                    </p>
                                </div>
                                <div>
                                    <p class="text-sm text-gray-500">风险等级</p>
                                    <span class="px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full"
                                        :class="selectedRisk.levelClass">
                                        {{ selectedRisk.level }}
                                    </span>
                                </div>
                                <div>
                                    <p class="text-sm text-gray-500">风险来源</p>
                                    <p class="text-base text-gray-900">{{ selectedRisk.source }}</p>
                                </div>
                            </div>
                        </div>
                        <!-- 历史记录 -->
                        <div class="bg-gray-50 p-4 rounded-lg">
                            <h3 class="text-lg font-semibold text-gray-800 mb-4">历史记录</h3>
                            <div class="space-y-4">
                                <div v-for="(record, index) in riskHistory" :key="index" class="flex items-start">
                                    <div class="w-8 flex-shrink-0">
                                        <div class="w-2 h-2 bg-blue-500 rounded-full mt-2"></div>
                                    </div>
                                    <div>
                                        <p class="text-sm text-gray-900">{{ record.action }}</p>
                                        <p class="text-xs text-gray-500">{{ record.time }} - {{ record.operator }}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- 处理建议 -->
                        <div class="bg-gray-50 p-4 rounded-lg">
                            <h3 class="text-lg font-semibold text-gray-800 mb-4">处理建议</h3>
                            <div class="space-y-2">
                                <div v-for="(suggestion, index) in riskSuggestions" :key="index"
                                    class="flex items-start">
                                    <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                                    <p class="text-base text-gray-900">{{ suggestion }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="mt-6 flex justify-end">
                        <button @click="showRiskModal = false"
                            class="px-4 py-2 bg-gray-100 text-gray-700 rounded hover:bg-gray-200 !rounded-button whitespace-nowrap cursor-pointer">
                            关闭
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <!-- 顶部导航栏 -->
        <Header />
        <!-- 左侧导航栏 -->
        <aside class="fixed left-0 top-16 bottom-0 w-64 bg-gray-800 text-white z-10 overflow-y-auto">
            <nav class="py-4">
                <div v-for="(menu, index) in mainMenus" :key="index" class="mb-1">
                    <div class="flex items-center px-6 py-3 cursor-pointer hover:bg-gray-700"
                        :class="{ 'bg-blue-700': menu.active }" @click="toggleMenu(index)">
                        <i :class="menu.icon + ' mr-3 w-5 text-center'"></i>
                        <span>{{ menu.name }}</span>
                        <i class="fas fa-chevron-down ml-auto text-xs transition-transform duration-200"
                            :class="{ 'transform rotate-180': menu.expanded }"></i>
                    </div>
                    <div v-if="menu.expanded" class="bg-gray-900">
                        <div v-for="(submenu, subIndex) in menu.subMenus" :key="subIndex"
                            class="flex items-center px-10 py-2 cursor-pointer hover:bg-gray-700"
                            :class="{ 'text-blue-400': submenu.active }" @click="selectSubmenu(index, subIndex)">
                            <router-link v-if="menu.name === '风险研判' && submenu.name === '风险管理与分析'" to="/risk-analysis"
                                class="text-sm">{{ submenu.name }}</router-link>
                            <router-link v-else-if="submenu.link" :to="submenu.link" class="text-sm">{{
                                submenu.name }}</router-link>

                            <span v-else class="text-sm">{{ submenu.name }}</span>
                        </div>
                    </div>
                </div>
            </nav>
        </aside>
        <!-- 主内容区域 -->
        <main class="pt-16 pl-64">
            <div class="container mx-auto p-6">
                <!-- 面包屑导航 -->
                <div class="flex items-center text-sm mb-4 text-gray-500">
                    <span>首页</span>
                    <i class="fas fa-chevron-right mx-2 text-xs"></i>
                    <span>风险研判</span>
                    <i class="fas fa-chevron-right mx-2 text-xs"></i>
                    <span class="text-blue-600">风险管理与分析</span>
                </div>
                <!-- 风险概览区域 -->
                <div class="grid grid-cols-4 gap-4 mb-6">
                    <!-- 风险等级分布 -->
                    <div class="bg-white rounded-lg shadow-sm p-4">
                        <h3 class="font-bold text-base text-gray-800 mb-3">风险等级分布</h3>
                        <div id="riskLevelChart" class="h-48" ref="riskLevelChart"></div>
                    </div>
                    <!-- 风险趋势分析 -->
                    <div class="bg-white rounded-lg shadow-sm p-4">
                        <h3 class="font-bold text-base text-gray-800 mb-3">风险趋势分析</h3>
                        <div id="riskTrendChart" class="h-48" ref="riskTrendChart"></div>
                    </div>
                    <!-- 风险来源统计 -->
                    <div class="bg-white rounded-lg shadow-sm p-4">
                        <h3 class="font-bold text-base text-gray-800 mb-3">风险来源统计</h3>
                        <div id="riskSourceChart" class="h-48" ref="riskSourceChart"></div>
                    </div>
                    <!-- 重点风险提示 -->
                    <div class="bg-white rounded-lg shadow-sm p-4">
                        <h3 class="font-bold text-base text-gray-800 mb-3 flex items-center justify-between">
                            <span>重点风险提示</span>
                            <router-link to="/focus" data-readdy="true"
                                class="text-xs text-blue-600 cursor-pointer">查看全部</router-link>
                        </h3>
                        <div class="space-y-3">
                            <div v-for="(item, index) in topRisks" :key="index" class="flex items-start">
                                <span class="flex-shrink-0 w-2 h-2 rounded-full mt-1.5" :class="item.dotClass"></span>
                                <div class="ml-2 max-w-[calc(100%-1rem)]">
                                    <div class="text-sm font-medium text-gray-900 truncate">{{ item.title }}</div>
                                    <div class="text-xs text-gray-500 truncate">{{ item.location }} · {{ item.time }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 风险管理功能区 -->
                <div class="bg-white rounded-lg shadow-sm p-6 mb-6">
                    <div class="border-b border-gray-200 mb-4">
                        <ul class="flex -mb-px">
                            <li v-for="(tab, index) in tabs" :key="index" class="mr-2">
                                <button
                                    class="py-2 px-4 text-sm font-medium border-b-2 focus:outline-none !rounded-button whitespace-nowrap cursor-pointer"
                                    :class="activeTab === tab.id ? 'border-blue-600 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'"
                                    @click="activeTab = tab.id">
                                    <i :class="tab.icon + ' mr-1'"></i>
                                    {{ tab.name }}
                                </button>
                            </li>
                        </ul>
                    </div>
                    <!-- 风险筛选 -->
                    <div class="bg-white rounded-lg shadow-sm p-4 mb-6">
                        <div class="grid grid-cols-5 gap-6 items-end">
                            <!-- 风险等级筛选 -->
                            <div class="flex flex-col">
                                <span class="text-gray-600 text-sm mb-2">风险等级</span>
                                <div class="flex gap-2">
                                    <button v-for="(level, idx) in riskLevels" :key="idx"
                                        class="px-3 py-1 text-sm rounded flex items-center transition-all !rounded-button whitespace-nowrap cursor-pointer"
                                        :class="level.active ? level.activeClass : 'bg-gray-100 text-gray-600 hover:bg-gray-200'"
                                        @click="toggleRiskLevel(idx)">
                                        <span class="w-2 h-2 rounded-full mr-1" :class="level.dotClass"></span>
                                        {{ level.name }}
                                    </button>
                                </div>
                            </div>

                            <!-- 区域选择 -->
                            <div class="flex flex-col">
                                <span class="text-gray-600 text-sm mb-2">区域选择</span>
                                <div class="relative">
                                    <button @click="toggleAreaDropdown"
                                        class="flex items-center justify-between w-full px-3 py-2 bg-gray-100 border border-gray-300 rounded-lg focus:outline-none !rounded-button whitespace-nowrap cursor-pointer">
                                        <span class="text-gray-700 truncate">{{ filterConditions.area }}</span>
                                        <i class="fas fa-chevron-down text-gray-500 text-xs ml-1"></i>
                                    </button>
                                    <div v-if="showAreaDropdown"
                                        class="absolute z-20 w-full mt-1 bg-white rounded-md shadow-lg border border-gray-200 max-h-48 overflow-y-auto">
                                        <div class="py-1">
                                            <button v-for="area in areas" :key="area" type="button"
                                                @click="selectArea(area)"
                                                class="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-700 transition-colors">
                                                {{ area }}
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- 时间范围 -->
                            <div class="flex flex-col">
                                <span class="text-gray-600 text-sm mb-2">时间范围</span>
                                <div class="relative">
                                    <button @click="toggleTimeRangeDropdown"
                                        class="flex items-center justify-between w-full px-3 py-2 bg-gray-100 border border-gray-300 rounded-lg focus:outline-none !rounded-button whitespace-nowrap cursor-pointer">
                                        <span class="text-gray-700 truncate">{{ filterConditions.timeRange }}</span>
                                        <i class="fas fa-chevron-down text-gray-500 text-xs ml-1"></i>
                                    </button>
                                    <div v-if="showTimeRangeDropdown"
                                        class="absolute z-20 w-full mt-1 bg-white rounded-md shadow-lg border border-gray-200">
                                        <div class="py-1">
                                            <button v-for="range in timeRanges" :key="range" type="button"
                                                @click="selectTimeRange(range)"
                                                class="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-700 transition-colors">
                                                {{ range }}
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- 风险类型 -->
                            <div class="flex flex-col">
                                <span class="text-gray-600 text-sm mb-2">风险类型</span>
                                <div class="relative z-10">
                                    <button @click="toggleRiskTypeDropdown"
                                        class="flex items-center justify-between w-full px-3 py-2 bg-gray-100 border border-gray-300 rounded-lg focus:outline-none !rounded-button whitespace-nowrap cursor-pointer relative z-10 hover:bg-gray-200">
                                        <span class="text-gray-700 truncate">{{ filterConditions.riskType }}</span>
                                        <i class="fas fa-chevron-down text-gray-500 text-xs ml-1"></i>
                                    </button>
                                    <div v-if="showRiskTypeDropdown"
                                        class="absolute z-20 w-full mt-1 bg-white rounded-md shadow-lg border border-gray-200 max-h-48 overflow-y-auto">
                                        <div class="py-1">
                                            <button v-for="type in riskTypeOptions" :key="type" type="button"
                                                @click="selectRiskType(type)"
                                                class="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-700 transition-colors">
                                                {{ type }}
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- 关键词搜索和刷新按钮 -->
                            <div class="flex flex-col">
                                <span class="text-gray-600 text-sm mb-2">关键词搜索</span>
                                <div class="flex gap-2">
                                    <div class="relative flex-1">
                                        <input type="text" v-model="filterConditions.keyword" @input="debouncedSearch"
                                            placeholder="搜索风险内容"
                                            class="w-full pl-10 pr-4 py-2 bg-gray-100 border border-gray-300 rounded-lg text-sm focus:outline-none border-none" />
                                        <i
                                            class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                                    </div>
                                    <button @click="refreshData"
                                        class="px-4 py-2 bg-blue-600 text-white rounded-lg flex items-center !rounded-button whitespace-nowrap cursor-pointer">
                                        刷新数据
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 风险识别内容 -->
                    <div v-if="activeTab === 'identification'" class="mb-4">
                        <div class="flex justify-between items-center mb-4">
                            <div>
                                <h2 class="font-bold text-lg text-gray-800">风险识别清单</h2>
                                <div class="flex items-center space-x-4 mt-1">
                                    <span class="text-sm text-gray-600">
                                        共 <span class="font-medium text-blue-600">{{ filteredRiskList.length }}</span> 条记录
                                    </span>
                                    <span v-if="filteredRiskList.length !== riskList.length" class="text-sm text-orange-600">
                                        (已筛选，原始数据 {{ riskList.length }} 条)
                                    </span>
                                </div>
                            </div>
                            <div class="flex space-x-3">
                                <button @click="exportRiskData"
                                    class="px-4 py-2 bg-gray-100 text-gray-700 rounded flex items-center !rounded-button whitespace-nowrap cursor-pointer">
                                    <i class="fas fa-download mr-2"></i> 导出数据
                                </button>
                                <button @click="showAddRiskModal = true"
                                    class="px-4 py-2 bg-blue-600 text-white rounded flex items-center !rounded-button whitespace-nowrap cursor-pointer">
                                    <i class="fas fa-plus mr-2"></i> 添加风险
                                </button>
                            </div>

                            

                            <!-- 添加风险模态框 -->
                            <div v-if="showAddRiskModal"
                                class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
                                <div class="bg-white rounded-lg w-3/4 max-w-3xl max-h-[80vh] overflow-y-auto">
                                    <div class="p-6">
                                        <div class="flex justify-between items-center mb-6">
                                            <h2 class="text-2xl font-bold text-gray-800">添加风险</h2>
                                            <button @click="showAddRiskModal = false"
                                                class="text-gray-500 hover:text-gray-700">
                                                <i class="fas fa-times text-xl"></i>
                                            </button>
                                        </div>

                                        <form @submit.prevent="submitNewRisk" class="space-y-6">
                                            <!-- 风险类型 -->
                                            <div>
                                                <label class="block text-sm font-medium text-gray-700 mb-2">风险类型</label>
                                                <div class="relative">
                                                    <button type="button" @click="toggleRiskTypeDropdownForAdd"
                                                        class="w-full flex items-center justify-between bg-gray-100 text-gray-700 px-4 py-2 rounded text-sm !rounded-button whitespace-nowrap cursor-pointer">
                                                        <span>{{ newRiskForm.type || '请选择风险类型' }}</span>
                                                        <i class="fas fa-chevron-down text-xs"></i>
                                                    </button>
                                                    <div v-if="showRiskTypeDropdownForAdd"
                                                        class="absolute z-10 w-full mt-1 bg-white rounded-md shadow-lg">
                                                        <div class="py-1">
                                                            <button v-for="type in riskTypes" :key="type.name"
                                                                type="button" @click="selectRiskTypeForAdd(type)"
                                                                class="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                                                                <span>{{ type.name }}</span>
                                                            </button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <!-- 风险描述 -->
                                            <div>
                                                <label class="block text-sm font-medium text-gray-700 mb-2">风险描述</label>
                                                <textarea v-model="newRiskForm.description" rows="4"
                                                    class="w-full px-4 py-2 text-sm text-gray-700 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                                                    placeholder="请详细描述风险情况..." maxlength="500"></textarea>
                                                <div class="text-xs text-gray-500 mt-1">{{
                                                    newRiskForm.description.length }}/500</div>
                                            </div>

                                            <!-- 影响区域和位置 -->
                                            <div class="grid grid-cols-2 gap-4">
                                                <div>
                                                    <label
                                                        class="block text-sm font-medium text-gray-700 mb-2">影响区域</label>
                                                    <div class="relative">
                                                        <button type="button" @click="toggleAreaDropdownForAdd"
                                                            class="w-full flex items-center justify-between bg-gray-100 text-gray-700 px-4 py-2 rounded text-sm !rounded-button whitespace-nowrap cursor-pointer">
                                                            <span>{{ newRiskForm.area || '请选择影响区域' }}</span>
                                                            <i class="fas fa-chevron-down text-xs"></i>
                                                        </button>
                                                        <!-- 区域筛选下拉菜单 -->
                                                        <div v-if="showAreaDropdownForAdd"
                                                            class="absolute z-10 w-full mt-1 bg-white rounded-md shadow-lg">
                                                            <div class="py-1">
                                                                <button v-for="area in areas" :key="area"
                                                                    @click="selectAreaForAdd(area)"
                                                                    class="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                                                                    {{ area }}
                                                                </button>
                                                            </div>
                                                        </div>

                                                        <!-- 时间范围筛选下拉菜单 -->
                                                        <div v-if="showTimeRangeDropdown"
                                                            class="absolute z-10 w-full mt-1 bg-white rounded-md shadow-lg">
                                                            <div class="py-1">
                                                                <button v-for="range in timeRanges" :key="range"
                                                                    @click="selectTimeRange(range)"
                                                                    class="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                                                                    {{ range }}
                                                                </button>
                                                            </div>
                                                        </div>

                                                        <!-- 风险类型筛选下拉菜单 -->
                                                        <div v-if="showRiskTypeDropdown"
                                                            class="absolute z-10 w-full mt-1 bg-white rounded-md shadow-lg">
                                                            <div class="py-1">
                                                                <button v-for="type in riskTypeOptions" :key="type"
                                                                    @click="selectRiskTypeFilter(type)"
                                                                    class="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                                                                    {{ type }}
                                                                </button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div>
                                                    <label
                                                        class="block text-sm font-medium text-gray-700 mb-2">具体位置</label>
                                                    <input type="text" v-model="newRiskForm.location"
                                                        class="w-full px-4 py-2 text-sm text-gray-700 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                                                        placeholder="请输入具体位置">
                                                </div>
                                            </div>

                                            <!-- 风险来源和初步等级评估 -->
                                            <div class="grid grid-cols-2 gap-4">
                                                <div>
                                                    <label
                                                        class="block text-sm font-medium text-gray-700 mb-2">风险来源</label>
                                                    <div class="relative">
                                                        <button type="button" @click="toggleSourceDropdown"
                                                            class="w-full flex items-center justify-between bg-gray-100 text-gray-700 px-4 py-2 rounded text-sm !rounded-button whitespace-nowrap cursor-pointer">
                                                            <span>{{ newRiskForm.source || '请选择风险来源' }}</span>
                                                            <i class="fas fa-chevron-down text-xs"></i>
                                                        </button>
                                                        <div v-if="showSourceDropdown"
                                                            class="absolute z-10 w-full mt-1 bg-white rounded-md shadow-lg">
                                                            <div class="py-1">
                                                                <button v-for="source in sources" :key="source"
                                                                    type="button" @click="selectSource(source)"
                                                                    class="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                                                                    {{ source }}
                                                                </button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div>
                                                    <label
                                                        class="block text-sm font-medium text-gray-700 mb-2">初步风险等级</label>
                                                    <div class="relative">
                                                        <button type="button" @click="toggleInitialLevelDropdown"
                                                            class="w-full flex items-center justify-between bg-gray-100 text-gray-700 px-4 py-2 rounded text-sm !rounded-button whitespace-nowrap cursor-pointer">
                                                            <span>{{ newRiskForm.level || '请选择风险等级' }}</span>
                                                            <i class="fas fa-chevron-down text-xs"></i>
                                                        </button>
                                                        <div v-if="showInitialLevelDropdown"
                                                            class="absolute z-10 w-full mt-1 bg-white rounded-md shadow-lg">
                                                            <div class="py-1">
                                                                <button v-for="level in initialLevels" :key="level.name"
                                                                    type="button" @click="selectInitialLevel(level)"
                                                                    class="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                                                                    <div class="flex items-center">
                                                                        <span class="w-2 h-2 rounded-full mr-2"
                                                                            :class="level.dotClass"></span>
                                                                        {{ level.name }}
                                                                    </div>
                                                                </button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="flex justify-end space-x-4 pt-4">
                                                <button type="button" @click="showAddRiskModal = false"
                                                    class="px-4 py-2 bg-gray-100 text-gray-700 rounded hover:bg-gray-200 !rounded-button whitespace-nowrap cursor-pointer">
                                                    取消
                                                </button>
                                                <button type="submit" :disabled="!isNewRiskFormValid"
                                                    class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed !rounded-button whitespace-nowrap cursor-pointer">
                                                    提交
                                                </button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="overflow-x-auto w-full">
                            <table class="w-full table-fixed divide-y divide-gray-200">
                                <thead>
                                    <tr>
                                        <th
                                            class="w-28 px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                            风险编号</th>
                                        <th
                                            class="w-32 px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                            风险类型</th>
                                        <th
                                            class="w-64 px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                            风险描述</th>
                                        <th
                                            class="w-32 px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                            影响区域</th>
                                        <th
                                            class="w-32 px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                            发现时间</th>
                                        <th
                                            class="w-24 px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                            风险等级</th>
                                        <th
                                            class="w-28 px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                            操作</th>
                                    </tr>
                                </thead>
                                <tbody class="bg-white divide-y divide-gray-200">
                                    <!-- 空状态提示 -->
                                    <tr v-if="paginatedRiskList.length === 0" class="hover:bg-gray-50">
                                        <td colspan="7" class="px-4 py-8 text-center">
                                            <div class="flex flex-col items-center justify-center">
                                                <i class="fas fa-search text-gray-400 text-3xl mb-2"></i>
                                                <p class="text-gray-600 mb-1">暂无符合条件的风险数据</p>
                                                <p class="text-gray-400 text-sm">请尝试调整筛选条件或添加新的风险记录</p>
                                            </div>
                                        </td>
                                    </tr>
                                    <!-- 风险数据列表 -->
                                    <tr v-else v-for="(risk, index) in paginatedRiskList" :key="risk.id || index"
                                        class="hover:bg-gray-50 transition-colors duration-150">
                                        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900">
                                            <span class="font-medium">{{ risk.id }}</span>
                                        </td>
                                        <td class="px-4 py-3 whitespace-nowrap">
                                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                                                {{ risk.type }}
                                            </span>
                                        </td>
                                        <td class="px-4 py-3 text-sm text-gray-900 max-w-xs">
                                            <div class="truncate" :title="risk.description">{{ risk.description }}</div>
                                        </td>
                                        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900">
                                            <span class="text-gray-600">{{ risk.area }}</span>
                                        </td>
                                        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900">
                                            <div class="flex flex-col">
                                                <span class="font-medium">{{ risk.date }}</span>
                                                <span class="text-gray-500 text-xs">{{ risk.time }}</span>
                                            </div>
                                        </td>
                                        <td class="px-4 py-3 whitespace-nowrap">
                                            <span
                                                class="px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full"
                                                :class="risk.levelClass">
                                                {{ risk.level }}
                                            </span>
                                        </td>
                                        <td class="px-4 py-3 whitespace-nowrap text-sm font-medium">
                                            <div class="flex space-x-2">
                                                <button @click="viewRiskDetail(risk)"
                                                    class="text-blue-600 hover:text-blue-900 hover:underline transition-colors duration-150 !rounded-button whitespace-nowrap cursor-pointer">
                                                    详情
                                                </button>
                                                <button @click="openAssessmentModal(risk)"
                                                    class="text-green-600 hover:text-green-800 hover:underline transition-colors duration-150 !rounded-button whitespace-nowrap cursor-pointer">
                                                    评估
                                                </button>
                                                <button @click="deleteRisk(risk)"
                                                    class="text-red-600 hover:text-red-800 hover:underline transition-colors duration-150 !rounded-button whitespace-nowrap cursor-pointer">
                                                    删除
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="flex justify-between items-center mt-4">
                            <div class="flex items-center space-x-4">
                                <div class="text-sm text-gray-500">
                                    显示 {{ (pagination.risk.currentPage - 1) * pagination.risk.pageSize + 1 }} 至
                                    {{ Math.min(pagination.risk.currentPage * pagination.risk.pageSize,
                                        pagination.risk.total) }} 条，
                                    共 {{ pagination.risk.total }} 条
                                </div>
                                <select v-model="pagination.risk.pageSize"
                                    @change="changeRiskPageSize(pagination.risk.pageSize)"
                                    class="text-sm border border-gray-300 rounded px-2 py-1">
                                    <option value="5">5条/页</option>
                                    <option value="10">10条/页</option>
                                    <option value="20">20条/页</option>
                                    <option value="50">50条/页</option>
                                </select>
                            </div>
                            <div class="flex space-x-1">
                                <button @click="changeRiskPage(pagination.risk.currentPage - 1)"
                                    :disabled="pagination.risk.currentPage <= 1"
                                    :class="pagination.risk.currentPage <= 1 ? 'bg-gray-200 text-gray-400 cursor-not-allowed' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'"
                                    class="px-3 py-1 rounded !rounded-button whitespace-nowrap">上一页</button>

                                <button v-for="page in Math.min(riskTotalPages, 5)" :key="page"
                                    @click="changeRiskPage(page)"
                                    :class="page === pagination.risk.currentPage ? 'bg-blue-600 text-white' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'"
                                    class="px-3 py-1 rounded !rounded-button whitespace-nowrap cursor-pointer">{{ page
                                    }}</button>

                                <span v-if="riskTotalPages > 5" class="px-3 py-1 text-gray-500">...</span>

                                <button @click="changeRiskPage(pagination.risk.currentPage + 1)"
                                    :disabled="pagination.risk.currentPage >= riskTotalPages"
                                    :class="pagination.risk.currentPage >= riskTotalPages ? 'bg-gray-200 text-gray-400 cursor-not-allowed' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'"
                                    class="px-3 py-1 rounded !rounded-button whitespace-nowrap">下一页</button>
                            </div>
                        </div>
                    </div>
                    <!-- 风险评估内容 -->
                    <div v-if="activeTab === 'assessment'" class="mb-4">
                        <div class="flex justify-between items-center mb-4">
                            <h2 class="font-bold text-lg text-gray-800">风险评估矩阵</h2>
                            <div class="flex space-x-3">
                                <button @click="exportAssessmentData"
                                    class="px-4 py-2 bg-gray-100 text-gray-700 rounded flex items-center !rounded-button whitespace-nowrap cursor-pointer">
                                    <i class="fas fa-download mr-2"></i> 导出评估结果
                                </button>
                                <button @click="showNewAssessmentModal = true"
                                    class="px-4 py-2 bg-blue-600 text-white rounded flex items-center !rounded-button whitespace-nowrap cursor-pointer">
                                    <i class="fas fa-plus mr-2"></i> 新增评估
                                </button>
                            </div>
                        </div>

                        <!-- 评估详情模态框（移动到评估区域） -->
                        <div v-if="showAssessmentDetailModal"
                            class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
                            <div class="bg-white rounded-lg w-3/4 max-w-3xl max-h-[80vh] overflow-y-auto">
                                <div class="p-6">
                                    <div class="flex justify-between items-center mb-6">
                                        <h2 class="text-2xl font-bold text-gray-800">评估详情</h2>
                                        <button @click="closeAssessmentDetailModal" class="text-gray-500 hover:text-gray-700">
                                            <i class="fas fa-times text-xl"></i>
                                        </button>
                                    </div>
                                    <div v-if="selectedAssessment" class="space-y-6">
                                        <div class="bg-gray-50 p-4 rounded-lg">
                                            <h3 class="text-lg font-semibold text-gray-800 mb-4">基本信息</h3>
                                            <div class="grid grid-cols-2 gap-4">
                                                <div>
                                                    <p class="text-sm text-gray-500">风险描述</p>
                                                    <p class="text-base text-gray-900">{{ selectedAssessment.description }}</p>
                                                </div>
                                                <div>
                                                    <p class="text-sm text-gray-500">风险区域</p>
                                                    <p class="text-base text-gray-900">{{ selectedAssessment.area }}</p>
                                                </div>
                                                <div>
                                                    <p class="text-sm text-gray-500">发生概率</p>
                                                    <p class="text-base text-gray-900">{{ selectedAssessment.probability }}</p>
                                                </div>
                                                <div>
                                                    <p class="text-sm text-gray-500">影响程度</p>
                                                    <p class="text-base text-gray-900">{{ selectedAssessment.impact }}</p>
                                                </div>
                                                <div>
                                                    <p class="text-sm text-gray-500">风险评分</p>
                                                    <p class="text-base text-gray-900">{{ selectedAssessment.score }}</p>
                                                </div>
                                                <div>
                                                    <p class="text-sm text-gray-500">风险等级</p>
                                                    <span :class="selectedAssessment.levelClass" class="px-2 py-1 rounded text-sm">
                                                        {{ selectedAssessment.level }}
                                                    </span>
                                                </div>
                                                <div>
                                                    <p class="text-sm text-gray-500">评估时间</p>
                                                    <p class="text-base text-gray-900">{{ selectedAssessment.date }}</p>
                                                </div>
                                                <div>
                                                    <p class="text-sm text-gray-500">评估人员</p>
                                                    <p class="text-base text-gray-900">{{ selectedAssessment.assessor }}</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="flex justify-end space-x-3 mt-6">
                                        <button @click="closeAssessmentDetailModal"
                                            class="px-4 py-2 bg-gray-300 text-gray-700 rounded hover:bg-gray-400">关闭</button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 评估控制模态框（移动到评估区域） -->
                        <div v-if="showAssessmentControlModal"
                            class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
                            <div class="bg-white rounded-lg w-3/4 max-w-3xl max-h-[80vh] overflow-y-auto">
                                <div class="p-6">
                                    <div class="flex justify-between items-center mb-6">
                                        <h2 class="text-2xl font-bold text-gray-800">风险控制</h2>
                                        <button @click="closeAssessmentControlModal" class="text-gray-500 hover:text-gray-700">
                                            <i class="fas fa-times text-xl"></i>
                                        </button>
                                    </div>
                                    <div v-if="selectedAssessment" class="space-y-6">
                                        <div class="bg-gray-50 p-4 rounded-lg">
                                            <h3 class="text-lg font-semibold text-gray-800 mb-4">风险信息</h3>
                                            <div class="grid grid-cols-2 gap-4">
                                                <div>
                                                    <p class="text-sm text-gray-500">风险描述</p>
                                                    <p class="text-base text-gray-900">{{ selectedAssessment.description }}</p>
                                                </div>
                                                <div>
                                                    <p class="text-sm text-gray-500">风险等级</p>
                                                    <span :class="selectedAssessment.levelClass" class="px-2 py-1 rounded text-sm">
                                                        {{ selectedAssessment.level }}
                                                    </span>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="bg-white border rounded-lg p-4">
                                            <h3 class="text-lg font-semibold text-gray-800 mb-4">制定控制措施</h3>
                                            <div class="space-y-4">
                                                <div>
                                                    <label class="block text-sm font-medium text-gray-700 mb-2">控制措施</label>
                                                    <textarea v-model="controlForm.measure"
                                                        class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                                        rows="3" placeholder="请输入具体的控制措施..."></textarea>
                                                </div>
                                                <div class="grid grid-cols-2 gap-4">
                                                    <div>
                                                        <label class="block text-sm font-medium text-gray-700 mb-2">负责部门</label>
                                                        <select v-model="controlForm.department"
                                                            class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                                            <option value="">请选择部门</option>
                                                            <option value="设备维护部">设备维护部</option>
                                                            <option value="安全管理部">安全管理部</option>
                                                            <option value="环保监测部">环保监测部</option>
                                                            <option value="生产运营部">生产运营部</option>
                                                            <option value="质量管理部">质量管理部</option>
                                                        </select>
                                                    </div>
                                                    <div>
                                                        <label class="block text-sm font-medium text-gray-700 mb-2">负责人</label>
                                                        <select v-model="controlForm.responsible"
                                                            class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                                            <option value="">请选择负责人</option>
                                                            <option value="张工程师">张工程师</option>
                                                            <option value="李主管">李主管</option>
                                                            <option value="王经理">王经理</option>
                                                            <option value="刘安全员">刘安全员</option>
                                                            <option value="陈技术员">陈技术员</option>
                                                            <option value="赵主任">赵主任</option>
                                                        </select>
                                                    </div>
                                                </div>
                                                <div>
                                                    <label class="block text-sm font-medium text-gray-700 mb-2">完成期限</label>
                                                    <input type="date" v-model="controlForm.deadline"
                                                        class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="flex justify-end space-x-3 mt-6">
                                        <button @click="closeAssessmentControlModal"
                                            class="px-4 py-2 bg-gray-300 text-gray-700 rounded hover:bg-gray-400">取消</button>
                                        <button @click="submitControlMeasure"
                                            class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">提交控制措施</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- 风险评估矩阵 -->
                        <div class="grid grid-cols-2 gap-6 mb-6">
                            <div class="bg-white rounded-lg border border-gray-200 p-4">
                                <div class="flex justify-between items-center mb-3">
                                    <h3 class="font-bold text-base text-gray-800">风险矩阵图</h3>
                                    <button @click="refreshRiskMatrixChart"
                                        class="px-2 py-1 text-xs bg-blue-100 text-blue-600 rounded hover:bg-blue-200 transition-colors">
                                        <i class="fas fa-refresh mr-1"></i>刷新
                                    </button>
                                </div>
                                <div class="h-80 w-full" ref="riskMatrixChart"></div>
                            </div>
                            <div class="bg-white rounded-lg border border-gray-200 p-4">
                                <h3 class="font-bold text-base text-gray-800 mb-3">评分标准</h3>
                                <div class="grid grid-cols-2 gap-4">
                                    <div>
                                        <h4 class="text-sm font-medium text-gray-700 mb-2">可能性评分</h4>
                                        <div class="space-y-2">
                                            <div class="flex items-center justify-between text-sm">
                                                <span class="text-gray-600">5 - 几乎确定</span>
                                                
                                            </div>
                                            <div class="flex items-center justify-between text-sm">
                                                <span class="text-gray-600">4 - 很可能</span>
                                              
                                            </div>
                                            <div class="flex items-center justify-between text-sm">
                                                <span class="text-gray-600">3 - 可能</span>
                                                
                                            </div>
                                            <div class="flex items-center justify-between text-sm">
                                                <span class="text-gray-600">2 - 不太可能</span>
                                                
                                            </div>
                                            <div class="flex items-center justify-between text-sm">
                                                <span class="text-gray-600">1 - 极少</span>
                                                
                                            </div>
                                        </div>
                                    </div>
                                    <div>
                                        <h4 class="text-sm font-medium text-gray-700 mb-2">影响程度评分</h4>
                                        <div class="space-y-2">
                                            <div class="flex items-center justify-between text-sm">
                                                <span class="text-gray-600">5 - 灾难性</span>
                                                
                                            </div>
                                            <div class="flex items-center justify-between text-sm">
                                                <span class="text-gray-600">4 - 严重</span>
                                                
                                            </div>
                                            <div class="flex items-center justify-between text-sm">
                                                <span class="text-gray-600">3 - 中等</span>
                                            
                                            </div>
                                            <div class="flex items-center justify-between text-sm">
                                                <span class="text-gray-600">2 - 轻微</span>
                                                
                                            </div>
                                            <div class="flex items-center justify-between text-sm">
                                                <span class="text-gray-600">1 - 可忽略</span>
                                                
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- 风险评估清单 -->
                        <div>
                            <h3 class="font-bold text-base text-gray-800 mb-3">风险评估清单</h3>
                            <div class="overflow-x-auto">
                                <table class="min-w-full divide-y divide-gray-200">
                                    <thead>
                                        <tr>
                                            <th
                                                class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                                风险项</th>
                                            <th
                                                class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                                可能性</th>
                                            <th
                                                class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                                影响程度</th>
                                            <th
                                                class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                                风险评分</th>
                                            <th
                                                class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                                风险等级</th>
                                            <th
                                                class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                                评估时间</th>
                                            <th
                                                class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                                评估人</th>
                                            <th
                                                class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                                操作</th>
                                        </tr>
                                    </thead>
                                    <tbody class="bg-white divide-y divide-gray-200">
                                        <tr v-for="(assessment, index) in paginatedAssessmentList" :key="index"
                                            class="hover:bg-gray-50">
                                            <td class="px-6 py-4">
                                                <div class="text-sm text-gray-900">{{ assessment.description }}</div>
                                                <div class="text-xs text-gray-500">{{ assessment.area }}</div>
                                            </td>
                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{
                                                assessment.probability }}</td>
                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{
                                                assessment.impact }}</td>
                                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{{
                                                assessment.score }}</td>
                                            <td class="px-6 py-4 whitespace-nowrap">
                                                <span
                                                    class="px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full"
                                                    :class="assessment.levelClass">
                                                    {{ assessment.level }}
                                                </span>
                                            </td>
                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{
                                                assessment.date }}</td>
                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{
                                                assessment.assessor }}</td>
                                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                                <div class="flex space-x-2">
                                                    <button type="button" @click="viewAssessmentDetails(assessment, index)"
                                                        class="text-blue-600 hover:text-blue-800 !rounded-button whitespace-nowrap cursor-pointer">详情</button>
                                                    <button type="button" @click="controlAssessment(assessment, index)"
                                                        class="text-green-600 hover:text-green-800 !rounded-button whitespace-nowrap cursor-pointer">控制</button>
                                                    <button type="button" @click="deleteAssessment(index)"
                                                        class="text-red-600 hover:text-red-800 !rounded-button whitespace-nowrap cursor-pointer">删除</button>
                                                </div>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="flex justify-between items-center mt-4">
                                <div class="flex items-center space-x-4">
                                    <div class="text-sm text-gray-500">
                                        显示 {{ (pagination.assessment.currentPage - 1) * pagination.assessment.pageSize +
                                            1 }} 至
                                        {{ Math.min(pagination.assessment.currentPage * pagination.assessment.pageSize,
                                            pagination.assessment.total) }} 条，
                                        共 {{ pagination.assessment.total }} 条
                                    </div>
                                    <select v-model="pagination.assessment.pageSize"
                                        @change="changeAssessmentPageSize(pagination.assessment.pageSize)"
                                        class="text-sm border border-gray-300 rounded px-2 py-1">
                                        <option value="5">5条/页</option>
                                        <option value="10">10条/页</option>
                                        <option value="20">20条/页</option>
                                        <option value="50">50条/页</option>
                                    </select>
                                </div>
                                <div class="flex space-x-1">
                                    <button @click="changeAssessmentPage(pagination.assessment.currentPage - 1)"
                                        :disabled="pagination.assessment.currentPage <= 1"
                                        :class="pagination.assessment.currentPage <= 1 ? 'bg-gray-200 text-gray-400 cursor-not-allowed' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'"
                                        class="px-3 py-1 rounded !rounded-button whitespace-nowrap">上一页</button>

                                    <button v-for="page in Math.min(assessmentTotalPages, 5)" :key="page"
                                        @click="changeAssessmentPage(page)"
                                        :class="page === pagination.assessment.currentPage ? 'bg-blue-600 text-white' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'"
                                        class="px-3 py-1 rounded !rounded-button whitespace-nowrap cursor-pointer">{{
                                            page }}</button>

                                    <span v-if="assessmentTotalPages > 5" class="px-3 py-1 text-gray-500">...</span>

                                    <button @click="changeAssessmentPage(pagination.assessment.currentPage + 1)"
                                        :disabled="pagination.assessment.currentPage >= assessmentTotalPages"
                                        :class="pagination.assessment.currentPage >= assessmentTotalPages ? 'bg-gray-200 text-gray-400 cursor-not-allowed' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'"
                                        class="px-3 py-1 rounded !rounded-button whitespace-nowrap">下一页</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 风险控制内容 -->
                    <div v-if="activeTab === 'control'" class="mb-4">
                        <div class="flex justify-between items-center mb-4">
                            <h2 class="font-bold text-lg text-gray-800">风险控制措施跟踪</h2>
                            <div class="flex space-x-3">
                                <button @click="exportControlData"
                                    class="px-4 py-2 bg-gray-100 text-gray-700 rounded flex items-center !rounded-button whitespace-nowrap cursor-pointer">
                                    <i class="fas fa-download mr-2"></i> 导出数据
                                </button>
                                <button @click="showAddControlModal = true"
                                    class="px-4 py-2 bg-blue-600 text-white rounded flex items-center !rounded-button whitespace-nowrap cursor-pointer">
                                    <i class="fas fa-plus mr-2"></i> 添加控制措施
                                </button>
                                <!-- 添加控制措施模态框 -->
                                <div v-if="showAddControlModal"
                                    class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
                                    <div class="bg-white rounded-lg w-3/4 max-w-3xl max-h-[80vh] overflow-y-auto">
                                        <div class="p-6">
                                            <div class="flex justify-between items-center mb-6">
                                                <h2 class="text-2xl font-bold text-gray-800">添加风险控制措施</h2>
                                                <button @click="showAddControlModal = false"
                                                    class="text-gray-500 hover:text-gray-700">
                                                    <i class="fas fa-times text-xl"></i>
                                                </button>
                                            </div>
                                            <form @submit.prevent="submitControlMeasureFromAdd" class="space-y-6">
                                                <!-- 关联风险选择 -->
                                                <div>
                                                    <label
                                                        class="block text-sm font-medium text-gray-700 mb-2">关联风险</label>
                                                    <div class="relative">
                                                        <button type="button" @click="toggleRiskDropdown"
                                                            class="w-full flex items-center justify-between bg-gray-100 text-gray-700 px-4 py-2 rounded text-sm !rounded-button whitespace-nowrap cursor-pointer">
                                                            <span>{{ selectedRiskForControl?.description || '请选择关联风险'
                                                                }}</span>
                                                            <i class="fas fa-chevron-down text-xs"></i>
                                                        </button>
                                                        <div v-if="showRiskDropdown"
                                                            class="absolute z-10 w-full mt-1 bg-white rounded-md shadow-lg max-h-60 overflow-y-auto">
                                                            <div class="py-1">
                                                                <button v-for="risk in riskList" :key="risk.id"
                                                                    type="button" @click="selectRiskForControl(risk)"
                                                                    class="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                                                                    {{ risk.description }}
                                                                </button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <!-- 控制措施描述 -->
                                                <div>
                                                    <label
                                                        class="block text-sm font-medium text-gray-700 mb-2">控制措施描述</label>
                                                    <textarea v-model="controlForm.measure" rows="4"
                                                        class="w-full px-4 py-2 text-sm text-gray-700 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                                                        placeholder="请详细描述控制措施..." maxlength="500"></textarea>
                                                    <div class="text-xs text-gray-500 mt-1">{{
                                                        controlForm.measure.length }}/500</div>
                                                </div>
                                                <!-- 责任部门 -->
                                                <div>
                                                    <label
                                                        class="block text-sm font-medium text-gray-700 mb-2">责任部门</label>
                                                    <div class="relative">
                                                        <button type="button" @click="toggleDepartmentDropdown"
                                                            class="w-full flex items-center justify-between bg-gray-100 text-gray-700 px-4 py-2 rounded text-sm !rounded-button whitespace-nowrap cursor-pointer">
                                                            <span>{{ controlForm.department || '请选择责任部门' }}</span>
                                                            <i class="fas fa-chevron-down text-xs"></i>
                                                        </button>
                                                        <div v-if="showDepartmentDropdown"
                                                            class="absolute z-10 w-full mt-1 bg-white rounded-md shadow-lg">
                                                            <div class="py-1">
                                                                <button v-for="dept in departments" :key="dept"
                                                                    type="button" @click="selectDepartment(dept)"
                                                                    class="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                                                                    {{ dept }}
                                                                </button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <!-- 责任人 -->
                                                <div>
                                                    <label
                                                        class="block text-sm font-medium text-gray-700 mb-2">责任人</label>
                                                    <input type="text" v-model="controlForm.responsible"
                                                        class="w-full px-4 py-2 text-sm text-gray-700 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                                                        placeholder="请输入责任人姓名">
                                                </div>
                                                <!-- 计划完成时间 -->
                                                <div>
                                                    <label
                                                        class="block text-sm font-medium text-gray-700 mb-2">计划完成时间</label>
                                                    <input type="date" v-model="controlForm.deadline"
                                                        class="w-full px-4 py-2 text-sm text-gray-700 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                                                </div>
                                                <div class="flex justify-end space-x-4 pt-4">
                                                    <button type="button" @click="showAddControlModal = false"
                                                        class="px-4 py-2 bg-gray-100 text-gray-700 rounded hover:bg-gray-200 !rounded-button whitespace-nowrap cursor-pointer">
                                                        取消
                                                    </button>
                                                    <button type="submit" :disabled="!isControlFormValid"
                                                        class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed !rounded-button whitespace-nowrap cursor-pointer">
                                                        提交
                                                    </button>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                                <!-- 控制措施详情模态框 -->
                                <div v-if="showControlDetailModal"
                                    class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
                                    <div class="bg-white rounded-lg w-3/4 max-w-3xl max-h-[80vh] overflow-y-auto">
                                        <div class="p-6">
                                            <div class="flex justify-between items-center mb-6">
                                                <h2 class="text-2xl font-bold text-gray-800">控制措施详情</h2>
                                                <button @click="closeControlDetailModal"
                                                    class="text-gray-500 hover:text-gray-700">
                                                    <i class="fas fa-times text-xl"></i>
                                                </button>
                                            </div>
                                            <div v-if="selectedControl" class="space-y-4 text-sm text-gray-700">
                                                <div>
                                                    <span class="font-medium">风险项：</span>
                                                    <span>{{ selectedControl.risk }}</span>
                                                </div>
                                                <div>
                                                    <span class="font-medium">风险区域：</span>
                                                    <span>{{ selectedControl.area }}</span>
                                                </div>
                                                <div>
                                                    <span class="font-medium">风险等级：</span>
                                                    <span class="px-2 py-1 inline-flex text-xs font-semibold rounded-full"
                                                        :class="selectedControl.levelClass">{{ selectedControl.level }}</span>
                                                </div>
                                                <div>
                                                    <span class="font-medium">控制措施：</span>
                                                    <span>{{ selectedControl.measure }}</span>
                                                </div>
                                                <div>
                                                    <span class="font-medium">责任部门：</span>
                                                    <span>{{ selectedControl.department }}</span>
                                                </div>
                                                <div>
                                                    <span class="font-medium">责任人：</span>
                                                    <span>{{ selectedControl.responsible }}</span>
                                                </div>
                                                <div>
                                                    <span class="font-medium">计划完成时间：</span>
                                                    <span>{{ selectedControl.deadline }}</span>
                                                </div>
                                                <div>
                                                    <span class="font-medium">执行状态：</span>
                                                    <span class="px-2 py-1 inline-flex text-xs font-semibold rounded-full"
                                                        :class="selectedControl.statusClass">{{ selectedControl.status }}</span>
                                                </div>
                                            </div>
                                            <div class="flex justify-end mt-6">
                                                <button type="button" @click="closeControlDetailModal"
                                                    class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 !rounded-button whitespace-nowrap cursor-pointer">关闭</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- 更新控制措施模态框 -->
                                <div v-if="showUpdateControlModal"
                                    class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
                                    <div class="bg-white rounded-lg w-3/4 max-w-3xl max-h-[80vh] overflow-y-auto">
                                        <div class="p-6">
                                            <div class="flex justify-between items-center mb-6">
                                                <h2 class="text-2xl font-bold text-gray-800">更新控制措施</h2>
                                                <button @click="closeUpdateControlModal"
                                                    class="text-gray-500 hover:text-gray-700">
                                                    <i class="fas fa-times text-xl"></i>
                                                </button>
                                            </div>
                                            <form @submit.prevent="submitUpdateControl" class="space-y-6">
                                                <!-- 控制措施描述 -->
                                                <div>
                                                    <label class="block text-sm font-medium text-gray-700 mb-2">控制措施描述</label>
                                                    <textarea v-model="updateControlForm.measure" rows="4"
                                                        class="w-full px-4 py-2 text-sm text-gray-700 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                                                        placeholder="请详细描述控制措施..." maxlength="500"></textarea>
                                                    <div class="text-xs text-gray-500 mt-1">{{ updateControlForm.measure?.length || 0 }}/500</div>
                                                </div>
                                                <!-- 责任部门 -->
                                                <div>
                                                    <label class="block text-sm font-medium text-gray-700 mb-2">责任部门</label>
                                                    <div class="relative">
                                                        <button type="button" @click="toggleUpdateDepartmentDropdown"
                                                            class="w-full flex items-center justify-between bg-gray-100 text-gray-700 px-4 py-2 rounded text-sm !rounded-button whitespace-nowrap cursor-pointer">
                                                            <span>{{ updateControlForm.department || '请选择责任部门' }}</span>
                                                            <i class="fas fa-chevron-down text-xs"></i>
                                                        </button>
                                                        <div v-if="showUpdateDepartmentDropdown"
                                                            class="absolute z-10 w-full mt-1 bg-white rounded-md shadow-lg">
                                                            <div class="py-1">
                                                                <button v-for="dept in departments" :key="dept" type="button"
                                                                    @click="selectUpdateDepartment(dept)"
                                                                    class="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                                                                    {{ dept }}
                                                                </button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <!-- 责任人 -->
                                                <div>
                                                    <label class="block text-sm font-medium text-gray-700 mb-2">责任人</label>
                                                    <input type="text" v-model="updateControlForm.responsible"
                                                        class="w-full px-4 py-2 text-sm text-gray-700 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                                                        placeholder="请输入责任人姓名">
                                                </div>
                                                <!-- 计划完成时间 -->
                                                <div>
                                                    <label class="block text-sm font-medium text-gray-700 mb-2">计划完成时间</label>
                                                    <input type="date" v-model="updateControlForm.deadline"
                                                        class="w-full px-4 py-2 text-sm text-gray-700 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                                                </div>
                                                <!-- 执行状态 -->
                                                <div>
                                                    <label class="block text-sm font-medium text-gray-700 mb-2">执行状态</label>
                                                    <div class="relative">
                                                        <button type="button" @click="toggleUpdateStatusDropdown"
                                                            class="w-full flex items-center justify-between bg-gray-100 text-gray-700 px-4 py-2 rounded text-sm !rounded-button whitespace-nowrap cursor-pointer">
                                                            <span>{{ updateControlForm.status || '请选择执行状态' }}</span>
                                                            <i class="fas fa-chevron-down text-xs"></i>
                                                        </button>
                                                        <div v-if="showUpdateStatusDropdown"
                                                            class="absolute z-10 w-full mt-1 bg-white rounded-md shadow-lg">
                                                            <div class="py-1">
                                                                <button v-for="st in controlStatusOptions" :key="st" type="button"
                                                                    @click="selectUpdateStatus(st)"
                                                                    class="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                                                                    {{ st }}
                                                                </button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="flex justify-end space-x-4 pt-4">
                                                    <button type="button" @click="closeUpdateControlModal"
                                                        class="px-4 py-2 bg-gray-100 text-gray-700 rounded hover:bg-gray-200 !rounded-button whitespace-nowrap cursor-pointer">取消</button>
                                                    <button type="submit" :disabled="!isUpdateControlFormValid"
                                                        class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed !rounded-button whitespace-nowrap cursor-pointer">保存</button>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- 控制措施执行统计 -->
                        <div class="grid grid-cols-4 gap-4 mb-6">
                            <div class="bg-white rounded-lg border border-gray-200 p-4 flex items-center">
                                <div
                                    class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 mr-4">
                                    <i class="fas fa-tasks text-xl"></i>
                                </div>
                                <div>
                                    <div class="text-sm text-gray-500">控制措施总数</div>
                                    <div class="text-2xl font-bold text-gray-900">{{ controlTotalCount }}</div>
                                </div>
                            </div>
                            <div class="bg-white rounded-lg border border-gray-200 p-4 flex items-center">
                                <div
                                    class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center text-green-600 mr-4">
                                    <i class="fas fa-check-circle text-xl"></i>
                                </div>
                                <div>
                                    <div class="text-sm text-gray-500">已完成</div>
                                    <div class="text-2xl font-bold text-gray-900">{{ controlCompletedCount }}</div>
                                </div>
                            </div>
                            <div class="bg-white rounded-lg border border-gray-200 p-4 flex items-center">
                                <div
                                    class="w-12 h-12 rounded-full bg-yellow-100 flex items-center justify-center text-yellow-600 mr-4">
                                    <i class="fas fa-spinner text-xl"></i>
                                </div>
                                <div>
                                    <div class="text-sm text-gray-500">进行中</div>
                                    <div class="text-2xl font-bold text-gray-900">{{ controlInProgressCount }}</div>
                                </div>
                            </div>
                            <div class="bg-white rounded-lg border border-gray-200 p-4 flex items-center">
                                <div
                                    class="w-12 h-12 rounded-full bg-red-100 flex items-center justify-center text-red-600 mr-4">
                                    <i class="fas fa-exclamation-circle text-xl"></i>
                                </div>
                                <div>
                                    <div class="text-sm text-gray-500">逾期未完成</div>
                                    <div class="text-2xl font-bold text-gray-900">{{ controlOverdueCount }}</div>
                                </div>
                            </div>
                        </div>
                        <!-- 控制措施清单 -->
                        <div class="overflow-x-auto">
                            <table class="min-w-full divide-y divide-gray-200">
                                <thead>
                                    <tr>
                                        <th
                                            class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                            风险项</th>
                                        <th
                                            class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                            风险等级</th>
                                        <th
                                            class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                            控制措施</th>
                                        <th
                                            class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                            责任部门</th>
                                        <th
                                            class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                            责任人</th>
                                        <th
                                            class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                            计划完成时间</th>
                                        <th
                                            class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                            执行状态</th>
                                        <th
                                            class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                            操作</th>
                                    </tr>
                                </thead>
                                <tbody class="bg-white divide-y divide-gray-200">
                                    <tr v-for="(control, index) in paginatedControlList" :key="index"
                                        class="hover:bg-gray-50">
                                        <td class="px-6 py-4">
                                            <div class="text-sm text-gray-900 max-w-xs truncate">{{ control.risk }}
                                            </div>
                                            <div class="text-xs text-gray-500">{{ control.area }}</div>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <span
                                                class="px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full"
                                                :class="control.levelClass">
                                                {{ control.level }}
                                            </span>
                                        </td>
                                        <td class="px-6 py-4">
                                            <div class="text-sm text-gray-900 max-w-xs truncate">{{ control.measure }}
                                            </div>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{
                                            control.department }}</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{
                                            control.responsible }}</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{
                                            control.deadline }}</td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <span
                                                class="px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full"
                                                :class="control.statusClass">
                                                {{ control.status }}
                                            </span>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                            <div class="flex space-x-2">
                                                <button @click="openControlDetail(control)"
                                                    class="text-blue-600 hover:text-blue-800 !rounded-button whitespace-nowrap cursor-pointer">详情</button>
                                                <button @click="openUpdateControl(control)"
                                                    class="text-green-600 hover:text-green-800 !rounded-button whitespace-nowrap cursor-pointer">更新</button>
                                            </div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="flex justify-between items-center mt-4">
                            <div class="flex items-center space-x-4">
                                <div class="text-sm text-gray-500">
                                    显示 {{ (pagination.control.currentPage - 1) * pagination.control.pageSize + 1 }} 至
                                    {{ Math.min(pagination.control.currentPage * pagination.control.pageSize,
                                        pagination.control.total) }} 条，
                                    共 {{ pagination.control.total }} 条
                                </div>
                                <select v-model="pagination.control.pageSize"
                                    @change="changeControlPageSize(pagination.control.pageSize)"
                                    class="text-sm border border-gray-300 rounded px-2 py-1">
                                    <option value="5">5条/页</option>
                                    <option value="10">10条/页</option>
                                    <option value="20">20条/页</option>
                                    <option value="50">50条/页</option>
                                </select>
                            </div>
                            <div class="flex space-x-1">
                                <button @click="changeControlPage(pagination.control.currentPage - 1)"
                                    :disabled="pagination.control.currentPage <= 1"
                                    :class="pagination.control.currentPage <= 1 ? 'bg-gray-200 text-gray-400 cursor-not-allowed' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'"
                                    class="px-3 py-1 rounded !rounded-button whitespace-nowrap">上一页</button>

                                <button v-for="page in Math.min(controlTotalPages, 5)" :key="page"
                                    @click="changeControlPage(page)"
                                    :class="page === pagination.control.currentPage ? 'bg-blue-600 text-white' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'"
                                    class="px-3 py-1 rounded !rounded-button whitespace-nowrap cursor-pointer">{{ page
                                    }}</button>

                                <span v-if="controlTotalPages > 5" class="px-3 py-1 text-gray-500">...</span>

                                <button @click="changeControlPage(pagination.control.currentPage + 1)"
                                    :disabled="pagination.control.currentPage >= controlTotalPages"
                                    :class="pagination.control.currentPage >= controlTotalPages ? 'bg-gray-200 text-gray-400 cursor-not-allowed' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'"
                                    class="px-3 py-1 rounded !rounded-button whitespace-nowrap">下一页</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>
</template>
<script>
import * as echarts from 'echarts'
import { ElMessage, ElMessageBox } from 'element-plus'
import Header from '../components/Header.vue';
export default {
    components: {
    Header,
  },
    data() {
        return {
            _resizeRaf: null,
            showRiskModal: false,
            showAssessmentModal: false,
            showAssessmentDetailModal: false,
            showAssessmentControlModal: false,
            showAddControlModal: false,
            showControlDetailModal: false,
            showUpdateControlModal: false,
            selectedControl: null,
            updateControlForm: {
                id: null,
                measure: '',
                department: '',
                responsible: '',
                deadline: '',
                status: ''
            },
            showUpdateDepartmentDropdown: false,
            showUpdateStatusDropdown: false,
            controlStatusOptions: ['待处理', '进行中', '已完成', '已关闭'],
            showAddRiskModal: false,
            showNewAssessmentModal: false,
            newAssessmentType: 'manual',
            newAssessmentForm: {
                description: '',
                area: '',
                probability: '',
                impact: ''
            },
            selectedTemplate: null,
            templateAssessmentResults: [],
            aiAssessmentForm: {
                businessDescription: '',
                industry: '',
                companySize: ''
            },
            aiAssessmentResults: [],
            assessmentTemplates: [
                {
                    id: 1,
                    name: '金融风险评估模板',
                    description: '适用于金融机构的标准风险评估',
                    category: '金融',
                    riskCount: 15,
                    risks: [
                        { description: '信用风险', area: '信贷业务', probability: 3, impact: 4 },
                        { description: '市场风险', area: '投资业务', probability: 4, impact: 3 },
                        { description: '操作风险', area: '日常运营', probability: 2, impact: 3 }
                    ]
                },
                {
                    id: 2,
                    name: '制造业风险评估模板',
                    description: '适用于制造企业的风险评估',
                    category: '制造',
                    riskCount: 12,
                    risks: [
                        { description: '设备故障风险', area: '生产设备', probability: 3, impact: 4 },
                        { description: '供应链风险', area: '采购供应', probability: 2, impact: 3 },
                        { description: '质量风险', area: '产品质量', probability: 2, impact: 4 }
                    ]
                },
                {
                    id: 3,
                    name: '网络安全风险评估模板',
                    description: '适用于信息安全风险评估',
                    category: '安全',
                    riskCount: 18,
                    risks: [
                        { description: '数据泄露风险', area: '信息安全', probability: 3, impact: 5 },
                        { description: '系统入侵风险', area: '网络安全', probability: 2, impact: 4 },
                        { description: '恶意软件风险', area: '终端安全', probability: 4, impact: 3 }
                    ]
                }
            ],
            showTimeRangeDropdown: false,
            showRiskTypeDropdown: false,
            showRiskTypeDropdownForAdd: false,
            showAreaDropdown: false,
            showAreaDropdownForAdd: false,
            showSourceDropdown: false,
            showInitialLevelDropdown: false,
            // 评估模块下拉菜单控制
            showAssessmentAreaDropdown: false,
            showAssessmentLevelDropdown: false,
            showAssessmentAssessorDropdown: false,
            showAssessmentTimeRangeDropdown: false,
            // 控制模块下拉菜单控制
            showControlAreaDropdown: false,
            showControlLevelDropdown: false,
            showControlStatusDropdown: false,
            showControlDepartmentDropdown: false,
            showControlResponsibleDropdown: false,
            showControlTimeRangeDropdown: false,
            searchKeyword: '',
            filterConditions: {
                riskLevels: ['全部'],
                area: '全部区域',
                timeRange: '全部时间',
                riskType: '全部类型',
                keyword: '',
                source: '',
                reporter: '',
                riskId: '',
                status: ''
            },
            // 增强筛选功能相关数据
            showAdvancedFilter: false,
            showSearchSuggestions: false,
            showSourceDropdown: false,
            showStatusDropdown: false,
            searchLoading: false,
            searchHistory: ['设备故障', '温度异常', '压力波动', '气体泄漏', '噪声超标'],
            searchSuggestions: [],
            debounceTimer: null,
            // 风险来源选项
            riskSources: ['全部来源', '自动监测', '人工上报', '设备监测', '安全巡检', '环境监测', '第三方检测'],
            // 处理状态选项
            riskStatuses: ['全部状态', '待处理', '处理中', '已处理', '已关闭', '逾期'],
            // 筛选预设
            filterPresets: [
                {
                    id: 1,
                    name: '高风险未处理',
                    filters: {
                        riskLevels: ['高风险'],
                        status: '待处理',
                        timeRange: '七天内'
                    }
                },
                {
                    id: 2,
                    name: '设备相关风险',
                    filters: {
                        riskType: '设备风险',
                        area: '动力厂'
                    }
                },
                {
                    id: 3,
                    name: '环境监测异常',
                    filters: {
                        riskType: '环境风险',
                        source: '自动监测'
                    }
                }
            ],
            // 评估查询条件
            assessmentFilterConditions: {
                area: '全部区域',
                level: '全部等级',
                assessor: '全部评估人',
                timeRange: '全部时间',
                keyword: ''
            },
            // 控制查询条件
            controlFilterConditions: {
                area: '全部区域',
                level: '全部等级',
                status: '全部状态',
                department: '全部部门',
                responsible: '全部负责人',
                timeRange: '全部时间',
                keyword: ''
            },
            // 过滤后的列表
            filteredAssessmentList: [],
            filteredControlList: [],
            areas: ['全部区域', '炼铁厂', '炼钢厂', '烧结厂', '轧钢厂', '动力厂', '原料厂', '环保设施', '厂区边界'],
            timeRanges: ['全部时间', '七天内', '三十天内'],
            riskTypeOptions: ['全部类型', '设备风险', '安全风险', '环境风险'],
            newRiskForm: {
                type: '',
                icon: '',
                iconBg: '',
                description: '',
                area: '',
                location: '',
                source: '',
                level: '',
                levelClass: ''
            },
            filteredRiskList: [],
            riskTypes: [
                { name: '设备风险', icon: 'fas fa-cogs', iconBg: 'bg-red-600' },
                { name: '安全风险', icon: 'fas fa-user-hard-hat', iconBg: 'bg-blue-600' },
                { name: '环境风险', icon: 'fas fa-cloud', iconBg: 'bg-green-600' }
            ],
            sources: ['全部来源', '自动监测', '人工上报', '设备监测', '安全巡检', '环境监测'],
            // 评估人员选项
            assessorOptions: ['全部评估人', '张工程师', '李主管', '王经理', '刘安全员', '陈技术员'],
            // 控制状态选项
            statusOptions: ['全部状态', '待处理', '进行中', '已完成', '已关闭'],
            // 部门选项
            departmentOptions: ['全部部门', '设备维护部', '安全管理部', '环保监测部', '生产运营部', '质量管理部'],
            // 负责人选项
            responsibleOptions: ['全部负责人', '张工程师', '李主管', '王经理', '刘安全员', '陈技术员', '赵主任'],
            initialLevels: [
                { name: '高风险', dotClass: 'bg-red-600', class: 'bg-red-100 text-red-800' },
                { name: '中风险', dotClass: 'bg-orange-600', class: 'bg-orange-100 text-orange-800' },
                { name: '低风险', dotClass: 'bg-yellow-600', class: 'bg-yellow-100 text-yellow-800' }
            ],
            showRiskDropdown: false,
            showDepartmentDropdown: false,
            selectedRiskForControl: null,
            departments: ['设备维护部', '安全管理部', '环保监测部', '生产运营部', '质量管理部'],
            controlForm: {
                measure: '',
                department: '',
                responsible: '',
                deadline: ''
            },
            selectedRisk: null,
            selectedAssessment: null,
            assessmentRisk: null,
            showProbabilityDropdown: false,
            showImpactDropdown: false,
            probabilityOptions: [
                { value: 1, label: '1 - 极少' },
                { value: 2, label: '2 - 不太可能' },
                { value: 3, label: '3 - 可能' },
                { value: 4, label: '4 - 很可能' },
                { value: 5, label: '5 - 几乎确定' }
            ],
            impactOptions: [
                { value: 1, label: '1 - 可忽略' },
                { value: 2, label: '2 - 轻微' },
                { value: 3, label: '3 - 中等' },
                { value: 4, label: '4 - 严重' },
                { value: 5, label: '5 - 灾难性' }
            ],
            assessmentForm: {
                probability: 0,
                impact: 0,
                reason: '',
                assessor: ''
            },
            riskHistory: [
                {
                    action: '风险首次发现并记录',
                    time: '2025-07-08 09:15:32',
                    operator: '系统自动'
                },
                {
                    action: '完成初步风险评估',
                    time: '2025-07-08 09:30:15',
                    operator: '张工程师'
                },
                {
                    action: '制定控制措施',
                    time: '2025-07-08 10:00:45',
                    operator: '李主管'
                },
                {
                    action: '开始实施控制措施',
                    time: '2025-07-08 10:30:22',
                    operator: '设备维护部'
                }
            ],
            riskSuggestions: [
                '立即组织专业技术人员进行现场检查，确定故障具体位置和原因',
                '临时调整工艺参数，确保生产安全',
                '准备备用设备和零部件，以应对可能的紧急情况',
                '加强监测频率，每小时记录一次相关参数',
                '制定应急预案，明确各部门职责和处置流程'
            ],
            mainMenus: [
                {
                    name: '监测报警',
                    icon: 'fas fa-bell',
                    expanded: false,
                    active: false,
                    subMenus: [
                        { name: '数据汇聚功能', active: false, link: '/data-aggregation' },
                        { name: '监测指标统计', active: false, link: '/monitoring-indicators' },
                        { name: '区域化展示', active: false, link: '/regional-display' }
                    ]
                },
                {
                    name: '风险研判',
                    icon: 'fas fa-exclamation-triangle',
                    expanded: true,
                    active: true,
                    subMenus: [
                        { name: '智能风险评估', active: false, link: '/intelligent-risk-assessment' },
                        { name: '预警信息推送', active: false, link: '/risk-warning-push' },
                        { name: '风险管理与分析', active: true, link: '/risk-analysis' },
                    ]
                },
                {
                    name: '在线巡查',
                    icon: 'fas fa-search',
                    expanded: false,
                    active: false,
                    subMenus: [
                        { name: '企业信息汇总', active: false, link: '/summary-information' },
                        { name: '巡查功能', active: false, link: '/patrol' },
                        { name: '检索功能', active: false, link: 'search' },
                        { name: '一屏汇聚展示', active: false, link: '/screen-display' }
                    ]
                },
                {
                    name: '综合分析',
                    icon: 'fas fa-chart-line',
                    expanded: false,
                    active: false,
                    subMenus: [
                        { name: '联网与设备分析', active: false, link: '/equipment' },
                        { name: '应用情况分析', active: false, link: '/application' },
                        { name: '数据质量分析', active: false, link: '/data-quality' },
                        { name: '定期专题报告', active: false, link: 'report' }
                    ]
                },
                {
                    name: '系统管理',
                    icon: 'fas fa-cog',
                    expanded: false,
                    active: false,
                    subMenus: [
                        { name: '用户权限管理', active: false, link: 'user-permission' },
                        { name: '系统配置管理', active: false, link: 'system-manage' },
                        { name: '数据管理', active: false, link: 'data-manage' },
                        { name: '系统监控与维护', active: false, link: 'monitoring' }
                    ]
                }
            ],
            tabs: [
                { id: 'identification', name: '风险识别', icon: 'fas fa-search' },
                { id: 'assessment', name: '风险评估', icon: 'fas fa-chart-bar' },
                { id: 'control', name: '风险控制', icon: 'fas fa-shield-alt' }
            ],
            activeTab: 'assessment',
            riskLevels: [
                { name: '全部', active: true, activeClass: 'bg-blue-100 text-blue-600', dotClass: 'bg-blue-600' },
                { name: '高风险', active: false, activeClass: 'bg-red-100 text-red-600', dotClass: 'bg-red-600' },
                { name: '中风险', active: false, activeClass: 'bg-orange-100 text-orange-600', dotClass: 'bg-orange-600' }
            ],
            selectedArea: '全部区域',
            selectedTimeRange: '近 30 天',
            selectedRiskType: '全部类型',
            topRisks: [
                {
                    title: '3号高炉温度异常',
                    location: '炼铁厂 - 3号高炉',
                    time: '2025-07-08',
                    dotClass: 'bg-red-600'
                },
                {
                    title: '2号转炉气体泄漏',
                    location: '炼钢厂 - 2号转炉',
                    time: '2025-07-08',
                    dotClass: 'bg-red-600'
                },
                {
                    title: '烧结机废气超标',
                    location: '烧结厂 - 1号烧结机',
                    time: '2025-07-08',
                    dotClass: 'bg-orange-600'
                },
                {
                    title: '轧机振动异常',
                    location: '轧钢厂 - 热轧生产线',
                    time: '2025-07-07',
                    dotClass: 'bg-orange-600'
                }
            ],
            riskList: [
                {
                    id: 'R2025070801',
                    type: '设备风险',
                    source: '自动监测',
                    icon: 'fas fa-cogs',
                    iconBg: 'bg-red-600',
                    description: '3号高炉冷却系统温度异常，超过安全阈值20%，存在设备损坏风险',
                    area: '炼铁厂',
                    location: '3号高炉',
                    date: '2025-07-08',
                    time: '09:15:32',
                    level: '高风险',
                    levelClass: 'bg-red-100 text-red-800'
                },
                {
                    id: 'R2025070802',
                    type: '安全风险',
                    source: '人工上报',
                    icon: 'fas fa-user-hard-hat',
                    iconBg: 'bg-blue-600',
                    description: '2号转炉区域发现气体泄漏，现场检测氧气浓度低于标准值，需立即处理',
                    area: '炼钢厂',
                    location: '2号转炉',
                    date: '2025-10-08',
                    time: '08:45:17',
                    level: '高风险',
                    levelClass: 'bg-red-100 text-red-800'
                },
                {
                    id: 'R2025070803',
                    type: '环境风险',
                    source: '自动监测',
                    icon: 'fas fa-cloud',
                    iconBg: 'bg-green-600',
                    description: '烧结机废气处理系统效率下降，排放指标接近限值，需检查维护',
                    area: '烧结厂',
                    location: '1号烧结机',
                    date: '2025-10-08',
                    time: '07:30:45',
                    level: '中风险',
                    levelClass: 'bg-orange-100 text-orange-800'
                },
                {
                    id: 'R2025070704',
                    type: '设备风险',
                    source: '自动监测',
                    icon: 'fas fa-cogs',
                    iconBg: 'bg-red-600',
                    description: '热轧生产线轧机传动系统振动异常，超过预警阈值15%',
                    area: '轧钢厂',
                    location: '热轧生产线',
                    date: '2025-10-07',
                    time: '16:20:11',
                    level: '中风险',
                    levelClass: 'bg-orange-100 text-orange-800'
                },
                {
                    id: 'R2025070705',
                    type: '安全风险',
                    source: '人工上报',
                    icon: 'fas fa-user-hard-hat',
                    iconBg: 'bg-blue-600',
                    description: '锅炉房蒸汽管道压力异常，安全阀响应迟缓，存在爆管风险',
                    area: '动力厂',
                    location: '锅炉房',
                    date: '2025-10-07',
                    time: '15:05:38',
                    level: '高风险',
                    levelClass: 'bg-red-100 text-red-800'
                },
                {
                    id: 'R2025070706',
                    type: '环境风险',
                    source: '自动监测',
                    icon: 'fas fa-cloud',
                    iconBg: 'bg-green-600',
                    description: '厂区东北角噪声监测点数值超标5dB，需排查噪声源',
                    area: '厂区边界',
                    location: '东北角',
                    date: '2025-07-07',
                    time: '14:15:22',
                    level: '低风险',
                    levelClass: 'bg-yellow-100 text-yellow-800'
                },
                {
                    id: 'R2025070707',
                    type: '设备风险',
                    source: '自动监测',
                    icon: 'fas fa-cogs',
                    iconBg: 'bg-red-600',
                    description: '连铸机冷却水系统压力波动，冷却效率降低，影响产品质量',
                    area: '炼钢厂',
                    location: '连铸机',
                    date: '2025-07-07',
                    time: '11:40:56',
                    level: '中风险',
                    levelClass: 'bg-orange-100 text-orange-800'
                },
                {
                    id: 'R2025070708',
                    type: '安全风险',
                    source: '人工上报',
                    icon: 'fas fa-user-hard-hat',
                    iconBg: 'bg-blue-600',
                    description: '原料堆场防尘网部分破损，大风天气可能导致粉尘飞扬',
                    area: '原料厂',
                    location: '堆场',
                    date: '2025-07-07',
                    time: '10:25:19',
                    level: '低风险',
                    levelClass: 'bg-yellow-100 text-yellow-800'
                },
                {
                    id: 'R2025070609',
                    type: '环境风险',
                    source: '自动监测',
                    icon: 'fas fa-cloud',
                    iconBg: 'bg-green-600',
                    description: '废水处理站COD在线监测数值波动，接近排放上限',
                    area: '环保设施',
                    location: '废水处理站',
                    date: '2025-07-06',
                    time: '16:50:33',
                    level: '中风险',
                    levelClass: 'bg-orange-100 text-orange-800'
                },
                {
                    id: 'R2025070610',
                    type: '设备风险',
                    source: '自动监测',
                    icon: 'fas fa-cogs',
                    iconBg: 'bg-red-600',
                    description: '高压配电室1号变压器温度异常升高，达到预警温度，需紧急检查',
                    area: '动力厂',
                    location: '配电室',
                    date: '2025-07-06',
                    time: '14:10:45',
                    level: '高风险',
                    levelClass: 'bg-red-100 text-red-800'
                }
            ],
            assessmentList: [
                {
                    description: '3号高炉冷却系统温度异常',
                    area: '炼铁厂 - 3号高炉',
                    probability: '4 - 很可能',
                    impact: '5 - 灾难性',
                    score: '20',
                    level: '高风险',
                    levelClass: 'bg-red-100 text-red-800',
                    date: '2025-07-08 10:30',
                    assessor: '张工程师'
                },
                {
                    description: '2号转炉区域气体泄漏',
                    area: '炼钢厂 - 2号转炉',
                    probability: '3 - 可能',
                    impact: '5 - 灾难性',
                    score: '15',
                    level: '高风险',
                    levelClass: 'bg-red-100 text-red-800',
                    date: '2025-07-08 09:45',
                    assessor: '李主管'
                },
                {
                    description: '烧结机废气处理系统效率下降',
                    area: '烧结厂 - 1号烧结机',
                    probability: '4 - 很可能',
                    impact: '3 - 中等',
                    score: '12',
                    level: '中风险',
                    levelClass: 'bg-orange-100 text-orange-800',
                    date: '2025-07-08 08:20',
                    assessor: '王经理'
                },
                {
                    description: '热轧生产线轧机传动系统振动异常',
                    area: '轧钢厂 - 热轧生产线',
                    probability: '3 - 可能',
                    impact: '3 - 中等',
                    score: '9',
                    level: '中风险',
                    levelClass: 'bg-orange-100 text-orange-800',
                    date: '2025-07-07 17:15',
                    assessor: '赵工程师'
                },
                {
                    description: '锅炉房蒸汽管道压力异常',
                    area: '动力厂 - 锅炉房',
                    probability: '3 - 可能',
                    impact: '5 - 灾难性',
                    score: '15',
                    level: '高风险',
                    levelClass: 'bg-red-100 text-red-800',
                    date: '2025-07-07 16:00',
                    assessor: '刘安全员'
                }
            ],
            controlList: [
                {
                    risk: '3号高炉冷却系统温度异常，超过安全阈值20%，存在设备损坏风险',
                    area: '炼铁厂 - 3号高炉',
                    level: '高风险',
                    levelClass: 'bg-red-100 text-red-800',
                    measure: '紧急调整冷却水流量，更换损坏的冷却管道，增加监测点，建立预警机制',
                    department: '设备维护部',
                    responsible: '张工程师',
                    deadline: '2025-07-10',
                    status: '进行中',
                    statusClass: 'bg-blue-100 text-blue-800'
                },
                {
                    risk: '2号转炉区域发现气体泄漏，现场检测氧气浓度低于标准值',
                    area: '炼钢厂 - 2号转炉',
                    level: '高风险',
                    levelClass: 'bg-red-100 text-red-800',
                    measure: '疏散现场人员，关闭相关阀门，检修泄漏点，恢复正常生产',
                    department: '安全管理部',
                    responsible: '李主管',
                    deadline: '2025-07-09',
                    status: '进行中',
                    statusClass: 'bg-blue-100 text-blue-800'
                },
                {
                    risk: '烧结机废气处理系统效率下降，排放指标接近限值',
                    area: '烧结厂 - 1号烧结机',
                    level: '中风险',
                    levelClass: 'bg-orange-100 text-orange-800',
                    measure: '清洗过滤装置，更换损坏部件，调整工艺参数，恢复处理效率',
                    department: '环保监测部',
                    responsible: '刘安全员',
                    deadline: '2025-07-12',
                    status: '已完成',
                    statusClass: 'bg-green-100 text-green-800'
                },
                {
                    risk: '热轧生产线轧机传动系统振动异常，超过预警阈值15%',
                    area: '轧钢厂 - 热轧生产线',
                    level: '中风险',
                    levelClass: 'bg-orange-100 text-orange-800',
                    measure: '检查传动系统，更换磨损轴承，调整传动装置平衡，加强润滑',
                    department: '设备维护部',
                    responsible: '赵工程师',
                    deadline: '2025-07-15',
                    status: '进行中',
                    statusClass: 'bg-blue-100 text-blue-800'
                },
                {
                    risk: '锅炉房蒸汽管道压力异常，安全阀响应迟缓，存在爆管风险',
                    area: '动力厂 - 锅炉房',
                    level: '高风险',
                    levelClass: 'bg-red-100 text-red-800',
                    measure: '降低锅炉负荷，检修安全阀，更换老化管道，恢复正常运行',
                    department: '生产运营部',
                    responsible: '王经理',
                    deadline: '2025-07-11',
                    status: '进行中',
                    statusClass: 'bg-blue-100 text-blue-800'
                },
                {
                    risk: '厂区东北角噪声监测点数值超标5dB，需排查噪声源',
                    area: '厂区边界 - 东北角',
                    level: '低风险',
                    levelClass: 'bg-yellow-100 text-yellow-800',
                    measure: '排查噪声源，安装隔音设施，调整设备运行时间，减少噪声影响',
                    department: '环保监测部',
                    responsible: '刘安全员',
                    deadline: '2025-07-20',
                    status: '已完成',
                    statusClass: 'bg-green-100 text-green-800'
                },
                {
                    risk: '连铸机冷却水系统压力波动，冷却效率降低，影响产品质量',
                    area: '炼钢厂 - 连铸机',
                    level: '中风险',
                    levelClass: 'bg-orange-100 text-orange-800',
                    measure: '检查水泵运行状态，清理管道沉积物，调整压力控制阀，恢复稳定压力',
                    department: '设备维护部',
                    responsible: '张工程师',
                    deadline: '2025-07-14',
                    status: '已完成',
                    statusClass: 'bg-green-100 text-green-800'
                },
                {
                    risk: '原料堆场防尘网部分破损，大风天气可能导致粉尘飞扬',
                    area: '原料厂 - 堆场',
                    level: '低风险',
                    levelClass: 'bg-yellow-100 text-yellow-800',
                    measure: '修复破损防尘网，增加喷淋频次，加强日常巡检，防止粉尘污染',
                    department: '环保监测部',
                    responsible: '刘安全员',
                    deadline: '2025-07-18',
                    status: '已完成',
                    statusClass: 'bg-green-100 text-green-800'
                },
                {
                    risk: '废水处理站COD在线监测数值波动，接近排放上限',
                    area: '环保设施 - 废水处理站',
                    level: '中风险',
                    levelClass: 'bg-orange-100 text-orange-800',
                    measure: '检查处理工艺，添加处理药剂，调整运行参数，确保稳定达标',
                    department: '环保监测部',
                    responsible: '刘安全员',
                    deadline: '2025-07-13',
                    status: '已完成',
                    statusClass: 'bg-green-100 text-green-800'
                },
                {
                    risk: '高压配电室1号变压器温度异常升高，达到预警温度',
                    area: '动力厂 - 配电室',
                    level: '高风险',
                    levelClass: 'bg-red-100 text-red-800',
                    measure: '降低负荷运行，检查冷却系统，清理散热片，更换老化部件',
                    department: '设备维护部',
                    responsible: '赵工程师',
                    deadline: '2025-07-09',
                    status: '逾期未完成',
                    statusClass: 'bg-red-100 text-red-800'
                }
            ],
            // 分页相关数据
            pagination: {
                risk: {
                    currentPage: 1,
                    pageSize: 10,
                    total: 0
                },
                assessment: {
                    currentPage: 1,
                    pageSize: 10,
                    total: 0
                },
                control: {
                    currentPage: 1,
                    pageSize: 10,
                    total: 0
                }
            }
        };
    },
    mounted() {
        // 初始化所有筛选结果
        this.applyFilters();
        this.applyAssessmentFilters();
        this.applyControlFilters();

        // 初始化分页总数
        this.pagination.risk.total = this.filteredRiskList.length;
        this.pagination.assessment.total = this.filteredAssessmentList.length;
        this.pagination.control.total = this.filteredControlList.length;

        this.$nextTick(() => {
            this.initRiskLevelChart();
            this.initRiskTrendChart();
            this.initRiskSourceChart();

            // 仅在评估页激活时初始化风险矩阵图，避免容器未渲染
            if (this.activeTab === 'assessment') {
                setTimeout(() => {
                    this.initRiskMatrixChart();
                }, 500);
            }

            // 强制触发activeTab变化，确保按钮事件正确绑定
            setTimeout(() => {
                const currentTab = this.activeTab;
                this.activeTab = '';
                this.$nextTick(() => {
                    this.activeTab = currentTab;
                });
            }, 100);
        })
        // 响应窗口大小变化
        window.addEventListener('resize', this.handleResize);
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.handleResize);
        // 清理所有图表实例
        const charts = [
            this.$refs.riskLevelChart,
            this.$refs.riskTrendChart,
            this.$refs.riskSourceChart,
            this.$refs.riskMatrixChart
        ];

        charts.forEach(ref => {
            if (ref) {
                const chart = echarts.getInstanceByDom(ref);
                if (chart) {
                    chart.dispose();
                }
            }
        });
    },
    computed: {
        isControlFormValid() {
            return this.selectedRiskForControl &&
                this.controlForm.measure.trim() &&
                this.controlForm.department &&
                this.controlForm.responsible.trim() &&
                this.controlForm.deadline;
        },
        isUpdateControlFormValid() {
            return this.updateControlForm &&
                (this.updateControlForm.measure || '').trim() &&
                this.updateControlForm.department &&
                (this.updateControlForm.responsible || '').trim() &&
                this.updateControlForm.deadline &&
                this.updateControlForm.status;
        },
        isNewRiskFormValid() {
            return this.newRiskForm.type &&
                this.newRiskForm.description.trim() &&
                this.newRiskForm.area &&
                this.newRiskForm.location.trim() &&
                this.newRiskForm.source &&
                this.newRiskForm.level;
        },
        // 新评估表单验证
        isNewFormValid() {
            return this.newAssessmentForm.description.trim() &&
                this.newAssessmentForm.area &&
                this.newAssessmentForm.probability &&
                this.newAssessmentForm.impact;
        },
        // 新评估风险评分计算
        calculateNewRiskScore() {
            if (!this.newAssessmentForm.probability || !this.newAssessmentForm.impact) return 0;
            return parseInt(this.newAssessmentForm.probability) * parseInt(this.newAssessmentForm.impact);
        },
        // 新评估风险等级计算
        calculateNewRiskLevel() {
            const score = this.calculateNewRiskScore;
            if (score >= 15) {
                return {
                    label: '极高风险',
                    class: 'bg-red-100 text-red-800',
                    priorityClass: 'bg-red-100 text-red-800',
                    priority: '紧急',
                    suggestion: '立即采取行动'
                };
            } else if (score >= 10) {
                return {
                    label: '高风险',
                    class: 'bg-orange-100 text-orange-800',
                    priorityClass: 'bg-orange-100 text-orange-800',
                    priority: '高',
                    suggestion: '尽快制定措施'
                };
            } else if (score >= 6) {
                return {
                    label: '中风险',
                    class: 'bg-yellow-100 text-yellow-800',
                    priorityClass: 'bg-yellow-100 text-yellow-800',
                    priority: '中',
                    suggestion: '定期监控'
                };
            } else {
                return {
                    label: '低风险',
                    class: 'bg-green-100 text-green-800',
                    priorityClass: 'bg-green-100 text-green-800',
                    priority: '低',
                    suggestion: '持续观察'
                };
            }
        },
        // 添加筛选计算属性
        isFormValid() {
            return this.assessmentForm.probability > 0 &&
                this.assessmentForm.impact > 0 &&
                this.assessmentForm.reason.trim() &&
                this.assessmentForm.assessor.trim();
        },
        calculateRiskScore() {
            if (this.assessmentForm.probability && this.assessmentForm.impact) {
                return this.assessmentForm.probability * this.assessmentForm.impact;
            }
            return 0;
        },

        calculateCurrentRiskLevel() {
            const score = this.calculateRiskScore;
            if (score >= 20) {
                return { label: '高风险', class: 'bg-red-100 text-red-800' };
            } else if (score >= 10) {
                return { label: '中风险', class: 'bg-orange-100 text-orange-800' };
            } else {
                return { label: '低风险', class: 'bg-yellow-100 text-yellow-800' };
            }
        },
        // 分页计算属性
        paginatedRiskList() {
            const start = (this.pagination.risk.currentPage - 1) * this.pagination.risk.pageSize;
            const end = start + this.pagination.risk.pageSize;
            this.pagination.risk.total = this.filteredRiskList.length;
            return this.filteredRiskList.slice(start, end);
        },
        paginatedAssessmentList() {
            const start = (this.pagination.assessment.currentPage - 1) * this.pagination.assessment.pageSize;
            const end = start + this.pagination.assessment.pageSize;
            this.pagination.assessment.total = this.filteredAssessmentList.length;
            return this.filteredAssessmentList.slice(start, end);
        },
        paginatedControlList() {
            const start = (this.pagination.control.currentPage - 1) * this.pagination.control.pageSize;
            const end = start + this.pagination.control.pageSize;
            this.pagination.control.total = this.filteredControlList.length;
            return this.filteredControlList.slice(start, end);
        },
        // 分页总页数
        riskTotalPages() {
            return Math.ceil(this.pagination.risk.total / this.pagination.risk.pageSize);
        },
        assessmentTotalPages() {
            return Math.ceil(this.pagination.assessment.total / this.pagination.assessment.pageSize);
        },
        controlTotalPages() {
            return Math.ceil(this.pagination.control.total / this.pagination.control.pageSize);
        },
        // 控制措施执行统计（基于当前筛选结果）
        controlTotalCount() {
            return this.filteredControlList.length;
        },
        controlCompletedCount() {
            return this.filteredControlList.filter(c => c.status === '已完成').length;
        },
        controlInProgressCount() {
            return this.filteredControlList.filter(c => c.status === '进行中').length;
        },
        controlOverdueCount() {
            return this.filteredControlList.filter(c => c.status === '逾期未完成').length;
        },
        // 增强筛选功能计算属性
        hasActiveFilters() {
            return this.filterConditions.area !== '全部区域' ||
                this.filterConditions.timeRange !== '全部时间' ||
                this.filterConditions.riskType !== '全部类型' ||
                (this.filterConditions.source && this.filterConditions.source !== '全部来源') ||
                (this.filterConditions.status && this.filterConditions.status !== '全部状态') ||
                this.filterConditions.keyword ||
                this.filterConditions.reporter ||
                this.filterConditions.riskId ||
                (this.filterConditions.riskLevels && !this.filterConditions.riskLevels.includes('全部'));
        },
        activeFilterTags() {
            const tags = {};

            if (this.filterConditions.area !== '全部区域') {
                tags.area = { label: '区域', value: this.filterConditions.area };
            }

            if (this.filterConditions.timeRange !== '全部时间') {
                tags.timeRange = { label: '时间', value: this.filterConditions.timeRange };
            }

            if (this.filterConditions.riskType !== '全部类型') {
                tags.riskType = { label: '类型', value: this.filterConditions.riskType };
            }

            if (this.filterConditions.source && this.filterConditions.source !== '全部来源') {
                tags.source = { label: '来源', value: this.filterConditions.source };
            }

            if (this.filterConditions.status && this.filterConditions.status !== '全部状态') {
                tags.status = { label: '状态', value: this.filterConditions.status };
            }

            if (this.filterConditions.keyword) {
                tags.keyword = { label: '关键词', value: this.filterConditions.keyword };
            }

            if (this.filterConditions.reporter) {
                tags.reporter = { label: '上报人', value: this.filterConditions.reporter };
            }

            if (this.filterConditions.riskId) {
                tags.riskId = { label: '风险ID', value: this.filterConditions.riskId };
            }

            if (this.filterConditions.riskLevels && !this.filterConditions.riskLevels.includes('全部')) {
                tags.riskLevels = { label: '风险等级', value: this.filterConditions.riskLevels.join(', ') };
            }

            return tags;
        }
    },
    methods: {
        selectTemplate(template) {
            this.selectedTemplate = template;
            const risks = Array.isArray(template.risks) ? template.risks : [];
            this.templateAssessmentResults = risks.map((r, idx) => {
                const riskLevel = this.calculateRiskLevel(r.probability, r.impact);
                return {
                    id: `${template.id}-${idx}`,
                    description: r.description,
                    area: r.area,
                    probability: r.probability,
                    impact: r.impact,
                    riskLevel,
                    riskLevelClass: this.getRiskLevelClass(riskLevel),
                    selected: true
                };
            });
        },
        startAIAssessment() {
            // 简易模拟生成AI评估结果（可替换为真实接口返回）
            const samples = [
                {
                    description: '供应链波动导致原料短缺风险',
                    area: '采购供应', probability: 3, impact: 3
                },
                {
                    description: '生产设备维护不足引发停机风险',
                    area: '生产设备', probability: 4, impact: 3
                },
                {
                    description: '信息系统权限配置不当带来安全风险',
                    area: '信息系统', probability: 2, impact: 4
                }
            ];
            this.aiAssessmentResults = samples.map((r, idx) => {
                const riskLevel = this.calculateRiskLevel(r.probability, r.impact);
                return {
                    id: `ai-${Date.now()}-${idx}`,
                    description: r.description,
                    area: r.area,
                    probability: r.probability,
                    impact: r.impact,
                    riskLevel,
                    riskLevelClass: this.getRiskLevelClass(riskLevel),
                    selected: true
                };
            });
        },
        submitTemplateAssessment() {
            const selected = this.templateAssessmentResults.filter(r => r.selected);
            if (selected.length === 0) return;

            const now = new Date();
            const pad = (n) => String(n).padStart(2, '0');
            const dateString = `${now.getFullYear()}-${pad(now.getMonth() + 1)}-${pad(now.getDate())} ${pad(now.getHours())}:${pad(now.getMinutes())}`;

            selected.forEach(r => {
                const probabilityLabel = this.probabilityOptions.find(o => o.value === r.probability)?.label || `${r.probability}`;
                const impactLabel = this.impactOptions.find(o => o.value === r.impact)?.label || `${r.impact}`;
                const level = this.calculateRiskLevel(r.probability, r.impact);
                const levelClass = this.getRiskLevelClass(level);
                const assessment = {
                    description: r.description,
                    area: r.area,
                    probability: probabilityLabel,
                    impact: impactLabel,
                    score: r.probability * r.impact,
                    level,
                    levelClass,
                    date: dateString,
                    assessor: '当前用户'
                };
                this.assessmentList.unshift(assessment);
            });

            this.applyAssessmentFilters();
            this.pagination.assessment.total = this.filteredAssessmentList.length;
            this.pagination.assessment.currentPage = 1;
            this.$forceUpdate();

            ElMessageBox.alert('模板评估已添加到清单！', '提示', { type: 'success' });
            // 关闭新增评估弹框并切换到“风险评估”页签
            this.showNewAssessmentModal = false;
            this.activeTab = 'assessment';
        },
        submitAIAssessment() {
            const selected = this.aiAssessmentResults.filter(r => r.selected);
            if (selected.length === 0) return;

            const now = new Date();
            const pad = (n) => String(n).padStart(2, '0');
            const dateString = `${now.getFullYear()}-${pad(now.getMonth() + 1)}-${pad(now.getDate())} ${pad(now.getHours())}:${pad(now.getMinutes())}`;

            selected.forEach(r => {
                const probabilityLabel = this.probabilityOptions.find(o => o.value === r.probability)?.label || `${r.probability}`;
                const impactLabel = this.impactOptions.find(o => o.value === r.impact)?.label || `${r.impact}`;
                const level = this.calculateRiskLevel(r.probability, r.impact);
                const levelClass = this.getRiskLevelClass(level);
                const assessment = {
                    description: r.description,
                    area: r.area,
                    probability: probabilityLabel,
                    impact: impactLabel,
                    score: r.probability * r.impact,
                    level,
                    levelClass,
                    date: dateString,
                    assessor: '当前用户'
                };
                this.assessmentList.unshift(assessment);
            });

            this.applyAssessmentFilters();
            this.pagination.assessment.total = this.filteredAssessmentList.length;
            this.pagination.assessment.currentPage = 1;
            this.$forceUpdate();

            // 关闭智能风险评估弹框
            this.showNewAssessmentModal = false;
            // 提交后自动切换到“风险评估”页签
            this.activeTab = 'assessment';
            ElMessageBox.alert('AI评估已添加到清单！', '提示', { type: 'success' });
        },
        getRiskLevelClass(level) {
    switch(level) {
        case '高风险':
            return 'bg-red-100 text-red-800';
        case '中风险':
            return 'bg-yellow-100 text-yellow-800';
        case '低风险':
            return 'bg-green-100 text-green-800';
        default:
            return 'bg-gray-100 text-gray-800';
    }
},
        refreshData() {
            // 重置所有筛选条件
            this.riskLevels.forEach(level => {
                level.active = level.name === '全部';
            });
            
            // 重置筛选条件
            this.filterConditions = {
                riskLevels: ['全部'],
                area: '全部区域',
                timeRange: '全部时间',
                riskType: '全部类型',
                keyword: '',
                source: '全部来源',
                reporter: '',
                riskId: '',
                status: '全部状态'
            };
            
            // 重置评估筛选条件
            this.assessmentFilterConditions = {
                area: '全部区域',
                level: '全部等级',
                assessor: '全部评估人',
                timeRange: '全部时间',
                keyword: ''
            };
            
            // 重置控制筛选条件
            this.controlFilterConditions = {
                area: '全部区域',
                level: '全部等级',
                status: '全部状态',
                department: '全部部门',
                responsible: '全部负责人',
                timeRange: '全部时间',
                keyword: ''
            };
            
            // 重新应用筛选
            this.applyFilters();
            this.applyAssessmentFilters();
            this.applyControlFilters();
            
            // 简单的刷新数据方法，不使用任何loading状态
            ElMessageBox.alert('数据刷新完成，筛选条件已重置', '提示', { type: 'success' });
        },
        // 风险等级筛选
        toggleRiskLevel(index) {
            if (!this.riskLevels || index >= this.riskLevels.length || index < 0) {
                return;
            }

            if (index === 0) {
                // 点击"全部"，重置其他选项
                this.riskLevels.forEach((level, i) => {
                    level.active = i === 0;
                });
                this.filterConditions.riskLevels = ['全部'];
                this.assessmentFilterConditions.level = '全部等级';
                this.controlFilterConditions.level = '全部等级';
            } else {
                if (this.riskLevels.length > 0) {
                    this.riskLevels[0].active = false; // 取消"全部"的选中
                }

                // 切换当前选中项的状态
                this.riskLevels[index].active = !this.riskLevels[index].active;

                // 收集所有激活的风险等级
                const activeLevels = this.riskLevels
                    .filter((level, i) => i > 0 && level.active)
                    .map(level => level.name);

                // 更新筛选条件
                this.filterConditions.riskLevels = activeLevels.length > 0 ? activeLevels : ['全部'];

                // 更新评估和控制清单的等级筛选条件
                if (activeLevels.length === 0) {
                    this.assessmentFilterConditions.level = '全部等级';
                    this.controlFilterConditions.level = '全部等级';
                } else {
                    // 多选时，评估和控制清单使用选中的等级数组
                    this.assessmentFilterConditions.level = activeLevels;
                    this.controlFilterConditions.level = activeLevels;
                }

                // 如果没有选中任何具体等级，则选中"全部"
                if (activeLevels.length === 0 && this.riskLevels.length > 0) {
                    this.riskLevels[0].active = true;
                }
            }

            this.applyFilters();
            this.applyAssessmentFilters();
            this.applyControlFilters();

        },
        toggleRiskTypeDropdown() {
            this.showRiskTypeDropdown = !this.showRiskTypeDropdown;
            this.showAreaDropdown = false;
            // this.showSourceDropdown = false;
            // this.showInitialLevelDropdown = false;
            this.showTimeRangeDropdown = false;
        },
        toggleAreaDropdown() {
            this.showAreaDropdown = !this.showAreaDropdown;
            this.showRiskTypeDropdown = false;
            this.showTimeRangeDropdown = false;
            // this.showSourceDropdown = false;
            // this.showInitialLevelDropdown = false;
        },
        toggleSourceDropdown() {
            this.showSourceDropdown = !this.showSourceDropdown;
            this.showRiskTypeDropdown = false;
            this.showAreaDropdown = false;
            this.showInitialLevelDropdown = false;
        },
        toggleTimeRangeDropdown() {
            this.showTimeRangeDropdown = !this.showTimeRangeDropdown;
            this.showAreaDropdown = false;
            this.showRiskTypeDropdown = false;
        },
        toggleInitialLevelDropdown() {
            this.showInitialLevelDropdown = !this.showInitialLevelDropdown;
            this.showRiskTypeDropdown = false;
            this.showAreaDropdown = false;
            this.showSourceDropdown = false;
        },

        selectRiskType(type) {
            this.filterConditions.riskType = type;
            this.showRiskTypeDropdown = false;
            this.applyFilters();
        },
        selectArea(area) {
            this.filterConditions.area = area;
            // this.selectArea = area;
            // this.newRiskForm.area = area;
            this.showAreaDropdown = false;
            this.applyFilters();
        },
        // 增强的风险识别查询过滤
        applyFilters() {
            let filtered = [...this.riskList];

            // 风险等级筛选
            if (this.filterConditions.riskLevels &&
                !this.filterConditions.riskLevels.includes('全部') &&
                this.filterConditions.riskLevels.length > 0) {
                filtered = filtered.filter(risk =>
                    this.filterConditions.riskLevels.includes(risk.level)
                );
            }

            // 区域筛选
            if (this.filterConditions.area && this.filterConditions.area !== '全部区域') {
                filtered = filtered.filter(risk =>
                    risk.area === this.filterConditions.area
                );
            }

            // 时间范围筛选
            if (this.filterConditions.timeRange && this.filterConditions.timeRange !== '全部时间') {
                const days = this.filterConditions.timeRange === '七天内' ? 7 : 30;
                const cutoffDate = new Date();
                cutoffDate.setDate(cutoffDate.getDate() - days);

                filtered = filtered.filter(risk => {
                    const riskDate = new Date(risk.date);
                    return riskDate >= cutoffDate;
                });
            }

            // 风险类型筛选
            if (this.filterConditions.riskType && this.filterConditions.riskType !== '全部类型') {
                filtered = filtered.filter(risk =>
                    risk.type === this.filterConditions.riskType
                );
            }

            // 来源筛选
            if (this.filterConditions.source && this.filterConditions.source !== '全部来源') {
                filtered = filtered.filter(risk =>
                    risk.source === this.filterConditions.source
                );
            }

            // 处理状态筛选
            if (this.filterConditions.status && this.filterConditions.status !== '全部状态') {
                filtered = filtered.filter(risk =>
                    risk.status === this.filterConditions.status
                );
            }

            // 风险ID精确搜索
            if (this.filterConditions.riskId && this.filterConditions.riskId.trim()) {
                const riskId = this.filterConditions.riskId.toLowerCase();
                filtered = filtered.filter(risk =>
                    risk.id && risk.id.toLowerCase().includes(riskId)
                );
            }

            // 上报人筛选
            if (this.filterConditions.reporter && this.filterConditions.reporter.trim()) {
                const reporter = this.filterConditions.reporter.toLowerCase();
                filtered = filtered.filter(risk =>
                    risk.reporter && risk.reporter.toLowerCase().includes(reporter)
                );
            }

            // 增强的关键词搜索（支持模糊搜索和多关键词）
            if (this.filterConditions.keyword && this.filterConditions.keyword.trim()) {
                const keywords = this.filterConditions.keyword.toLowerCase().split(/\s+/);
                filtered = filtered.filter(risk => {
                    const searchText = [
                        risk.description,
                        risk.location,
                        risk.id,
                        risk.type,
                        risk.area,
                        risk.source,
                        risk.reporter || ''
                    ].join(' ').toLowerCase();

                    return keywords.every(keyword => searchText.includes(keyword));
                });
            }

            this.filteredRiskList = filtered;
            // 更新分页总数
            this.pagination.risk.total = filtered.length;
            // 更新风险等级分布图表
            this.$nextTick(() => {
                this.updateRiskLevelChart();
                this.updateRiskSourceChart();
                this.updateRiskTrendChart();
            });
        },

        // 防抖搜索
        debouncedSearch() {
            this.searchLoading = true;

            if (this.debounceTimer) {
                clearTimeout(this.debounceTimer);
            }

            this.debounceTimer = setTimeout(() => {
                // 同步关键词到所有筛选条件
                this.assessmentFilterConditions.keyword = this.filterConditions.keyword;
                this.controlFilterConditions.keyword = this.filterConditions.keyword;
                
                // 应用所有筛选
                this.applyFilters();
                this.applyAssessmentFilters();
                this.applyControlFilters();
                this.updateSearchSuggestions();
                this.searchLoading = false;
            }, 300);
        },

        // 更新搜索建议
        updateSearchSuggestions() {
            if (this.filterConditions.keyword && this.filterConditions.keyword.length > 0) {
                const keyword = this.filterConditions.keyword.toLowerCase();
                this.searchSuggestions = this.searchHistory.filter(item =>
                    item.toLowerCase().includes(keyword) && item !== this.filterConditions.keyword
                ).slice(0, 5);
                this.showSearchSuggestions = this.searchSuggestions.length > 0;
            } else {
                this.showSearchSuggestions = false;
            }
        },

        // 选择搜索建议
        selectSearchSuggestion(suggestion) {
            this.filterConditions.keyword = suggestion;
            this.showSearchSuggestions = false;
            this.applyFilters();

            // 添加到搜索历史
            if (!this.searchHistory.includes(suggestion)) {
                this.searchHistory.unshift(suggestion);
                this.searchHistory = this.searchHistory.slice(0, 10); // 保持最多10条历史
            }
        },

        // 切换高级筛选面板
        toggleAdvancedFilter() {
            this.showAdvancedFilter = !this.showAdvancedFilter;
        },

        // 清空所有筛选条件
        clearAllFilters() {
            this.filterConditions = {
                riskLevels: ['全部'],
                area: '全部区域',
                timeRange: '全部时间',
                riskType: '全部类型',
                keyword: '',
                source: '',
                reporter: '',
                riskId: '',
                status: ''
            };

            // 重置风险等级按钮状态
            this.riskLevels.forEach((level, i) => {
                level.active = i === 0;
            });

            this.applyFilters();
        },

        // 移除单个筛选条件
        removeFilter(key) {
            switch (key) {
                case 'area':
                    this.filterConditions.area = '全部区域';
                    break;
                case 'timeRange':
                    this.filterConditions.timeRange = '全部时间';
                    break;
                case 'riskType':
                    this.filterConditions.riskType = '全部类型';
                    break;
                case 'source':
                    this.filterConditions.source = '';
                    break;
                case 'status':
                    this.filterConditions.status = '';
                    break;
                case 'keyword':
                    this.filterConditions.keyword = '';
                    break;
                case 'reporter':
                    this.filterConditions.reporter = '';
                    break;
                case 'riskId':
                    this.filterConditions.riskId = '';
                    break;
                case 'riskLevels':
                    this.filterConditions.riskLevels = ['全部'];
                    this.riskLevels.forEach((level, i) => {
                        level.active = i === 0;
                    });
                    break;
            }
            this.applyFilters();
        },

        // 选择风险来源
        selectSource(source) {
            this.filterConditions.source = source;
            this.showSourceDropdown = false;
            this.applyFilters();
        },

        // 选择处理状态
        selectStatus(status) {
            this.filterConditions.status = status;
            this.showStatusDropdown = false;
            this.applyFilters();
        },

        // 切换来源下拉菜单
        toggleSourceDropdown() {
            this.showSourceDropdown = !this.showSourceDropdown;
            this.showStatusDropdown = false;
        },

        // 切换状态下拉菜单
        toggleStatusDropdown() {
            this.showStatusDropdown = !this.showStatusDropdown;
            this.showSourceDropdown = false;
        },

        // 保存筛选预设
        saveFilterPreset() {
            const presetName = prompt('请输入预设名称：');
            if (presetName && presetName.trim()) {
                const newPreset = {
                    id: Date.now(),
                    name: presetName.trim(),
                    filters: { ...this.filterConditions }
                };
                this.filterPresets.push(newPreset);
                ElMessageBox.alert('筛选预设保存成功！', '提示', { type: 'success' });
            }
        },

        // 应用筛选预设
        applyFilterPreset(preset) {
            this.filterConditions = { ...preset.filters };

            // 更新风险等级按钮状态
            this.riskLevels.forEach((level, i) => {
                if (i === 0) {
                    level.active = this.filterConditions.riskLevels.includes('全部');
                } else {
                    level.active = this.filterConditions.riskLevels.includes(level.name);
                }
            });

            this.applyFilters();
        },

        // 删除筛选预设
        deleteFilterPreset(presetId) {
            if (confirm('确定要删除这个筛选预设吗？')) {
                this.filterPresets = this.filterPresets.filter(preset => preset.id !== presetId);
            }
        },

        // 风险评估查询过滤
        applyAssessmentFilters() {
            let filtered = [...this.assessmentList];

            // 区域筛选
            if (this.assessmentFilterConditions.area && this.assessmentFilterConditions.area !== '全部区域') {
                filtered = filtered.filter(assessment =>
                    assessment.area.includes(this.assessmentFilterConditions.area)
                );
            }

            // 风险等级筛选
            if (this.assessmentFilterConditions.level && this.assessmentFilterConditions.level !== '全部等级') {
                if (Array.isArray(this.assessmentFilterConditions.level)) {
                    // 多选等级筛选
                    filtered = filtered.filter(assessment =>
                        this.assessmentFilterConditions.level.includes(assessment.level)
                    );
                } else {
                    // 单选等级筛选
                    filtered = filtered.filter(assessment =>
                        assessment.level === this.assessmentFilterConditions.level
                    );
                }
            }

            // 评估人筛选
            if (this.assessmentFilterConditions.assessor && this.assessmentFilterConditions.assessor !== '全部评估人') {
                filtered = filtered.filter(assessment =>
                    assessment.assessor === this.assessmentFilterConditions.assessor
                );
            }

            // 时间范围筛选
            if (this.assessmentFilterConditions.timeRange && this.assessmentFilterConditions.timeRange !== '全部时间') {
                const days = this.assessmentFilterConditions.timeRange === '七天内' ? 7 : 30;
                const cutoffDate = new Date();
                cutoffDate.setDate(cutoffDate.getDate() - days);

                filtered = filtered.filter(assessment => {
                    const assessmentDate = new Date(assessment.date);
                    return assessmentDate >= cutoffDate;
                });
            }

            // 关键词搜索
            if (this.assessmentFilterConditions.keyword && this.assessmentFilterConditions.keyword.trim()) {
                const keyword = this.assessmentFilterConditions.keyword.toLowerCase();
                filtered = filtered.filter(assessment =>
                    assessment.description.toLowerCase().includes(keyword) ||
                    assessment.area.toLowerCase().includes(keyword) ||
                    assessment.assessor.toLowerCase().includes(keyword) ||
                    assessment.level.toLowerCase().includes(keyword)
                );
            }

            this.filteredAssessmentList = filtered;
            // 同步更新评估分页总数
            if (this.pagination && this.pagination.assessment) {
                this.pagination.assessment.total = filtered.length;
            }

            // 评估筛选变化后，若评估页激活则刷新风险矩阵图
            this.$nextTick(() => {
                if (this.activeTab === 'assessment') {
                    this.refreshRiskMatrixChart();
                }
            });
        },

        // 风险控制查询过滤
        applyControlFilters() {
            let filtered = [...this.controlList];

            // 区域筛选
            if (this.controlFilterConditions.area && this.controlFilterConditions.area !== '全部区域') {
                filtered = filtered.filter(control =>
                    control.area.includes(this.controlFilterConditions.area)
                );
            }

            // 风险等级筛选
            if (this.controlFilterConditions.level && this.controlFilterConditions.level !== '全部等级') {
                if (Array.isArray(this.controlFilterConditions.level)) {
                    // 多选等级筛选
                    filtered = filtered.filter(control =>
                        this.controlFilterConditions.level.includes(control.level)
                    );
                } else {
                    // 单选等级筛选
                    filtered = filtered.filter(control =>
                        control.level === this.controlFilterConditions.level
                    );
                }
            }

            // 控制状态筛选
            if (this.controlFilterConditions.status && this.controlFilterConditions.status !== '全部状态') {
                filtered = filtered.filter(control =>
                    control.status === this.controlFilterConditions.status
                );
            }

            // 负责部门筛选
            if (this.controlFilterConditions.department && this.controlFilterConditions.department !== '全部部门') {
                filtered = filtered.filter(control =>
                    control.department === this.controlFilterConditions.department
                );
            }

            // 负责人筛选
            if (this.controlFilterConditions.responsible && this.controlFilterConditions.responsible !== '全部负责人') {
                filtered = filtered.filter(control =>
                    control.responsible === this.controlFilterConditions.responsible
                );
            }

            // 时间范围筛选（按截止日期）
            if (this.controlFilterConditions.timeRange && this.controlFilterConditions.timeRange !== '全部时间') {
                const days = this.controlFilterConditions.timeRange === '七天内' ? 7 : 30;
                const cutoffDate = new Date();
                cutoffDate.setDate(cutoffDate.getDate() + days); // 未来时间

                filtered = filtered.filter(control => {
                    const deadlineDate = new Date(control.deadline);
                    return deadlineDate <= cutoffDate;
                });
            }

            // 关键词搜索
            if (this.controlFilterConditions.keyword && this.controlFilterConditions.keyword.trim()) {
                const keyword = this.controlFilterConditions.keyword.toLowerCase();
                filtered = filtered.filter(control =>
                    control.risk.toLowerCase().includes(keyword) ||
                    control.area.toLowerCase().includes(keyword) ||
                    control.measure.toLowerCase().includes(keyword) ||
                    control.department.toLowerCase().includes(keyword) ||
                    control.responsible.toLowerCase().includes(keyword) ||
                    control.status.toLowerCase().includes(keyword)
                );
            }

            this.filteredControlList = filtered;
        },

        // 区域选择方法
        selectArea(area) {
            this.filterConditions.area = area;
            // 为评估和控制清单设置正确的区域值
            this.assessmentFilterConditions.area = area === '全部' ? '全部区域' : area;
            this.controlFilterConditions.area = area === '全部' ? '全部区域' : area;
            this.showAreaDropdown = false;
            this.applyFilters();
            this.applyAssessmentFilters();
            this.applyControlFilters();
        },

        // 添加风险类型选择方法
        selectRiskTypeFilter(type) {
            this.filterConditions.riskType = type;
            this.showRiskTypeDropdown = false;
            this.applyFilters();
        },

        // 时间范围选择方法
        selectTimeRange(range) {
            this.filterConditions.timeRange = range;
            // 为评估和控制清单设置正确的时间范围值
            this.assessmentFilterConditions.timeRange = range === '全部' ? '全部时间' : range;
            this.controlFilterConditions.timeRange = range === '全部' ? '全部时间' : range;
            this.showTimeRangeDropdown = false;
            this.applyFilters();
            this.applyAssessmentFilters();
            this.applyControlFilters();
        },

        // 评估模块选择方法
        selectAssessmentArea(area) {
            this.assessmentFilterConditions.area = area;
            this.showAssessmentAreaDropdown = false;
            this.applyAssessmentFilters();
        },

        selectAssessmentLevel(level) {
            this.assessmentFilterConditions.level = level;
            this.showAssessmentLevelDropdown = false;
            this.applyAssessmentFilters();
        },

        selectAssessmentAssessor(assessor) {
            this.assessmentFilterConditions.assessor = assessor;
            this.showAssessmentAssessorDropdown = false;
            this.applyAssessmentFilters();
        },

        selectAssessmentTimeRange(range) {
            this.assessmentFilterConditions.timeRange = range;
            this.showAssessmentTimeRangeDropdown = false;
            this.applyAssessmentFilters();
        },

        // 控制模块选择方法
        selectControlArea(area) {
            this.controlFilterConditions.area = area;
            this.showControlAreaDropdown = false;
            this.applyControlFilters();
        },

        selectControlLevel(level) {
            this.controlFilterConditions.level = level;
            this.showControlLevelDropdown = false;
            this.applyControlFilters();
        },

        selectControlStatus(status) {
            this.controlFilterConditions.status = status;
            this.showControlStatusDropdown = false;
            this.applyControlFilters();
        },

        selectControlDepartment(department) {
            this.controlFilterConditions.department = department;
            this.showControlDepartmentDropdown = false;
            this.applyControlFilters();
        },

        selectControlResponsible(responsible) {
            this.controlFilterConditions.responsible = responsible;
            this.showControlResponsibleDropdown = false;
            this.applyControlFilters();
        },

        selectControlTimeRange(range) {
            this.controlFilterConditions.timeRange = range;
            this.showControlTimeRangeDropdown = false;
            this.applyControlFilters();
        },
        // 完善添加风险相关的下拉菜单控制
        toggleRiskTypeDropdownForAdd() {
            this.showRiskTypeDropdownForAdd = !this.showRiskTypeDropdownForAdd;
            this.showAreaDropdownForAdd = false;
            this.showSourceDropdown = false;
            this.showInitialLevelDropdown = false;
        },

        toggleAreaDropdownForAdd() {
            this.showAreaDropdownForAdd = !this.showAreaDropdownForAdd;
            this.showRiskTypeDropdown = false;
            this.showSourceDropdown = false;
            this.showInitialLevelDropdown = false;
        },

        selectRiskTypeForAdd(type) {
            this.newRiskForm.type = type.name;
            this.newRiskForm.icon = type.icon;
            this.newRiskForm.iconBg = type.iconBg;
            this.showRiskTypeDropdownForAdd = false;
        },

        selectAreaForAdd(area) {
            this.newRiskForm.area = area;
            this.showAreaDropdownForAdd = false;
        },


        selectSource(source) {
            this.newRiskForm.source = source;
            this.showSourceDropdown = false;
        },
        selectInitialLevel(level) {
            this.newRiskForm.level = level.name;
            this.newRiskForm.levelClass = level.class;
            this.showInitialLevelDropdown = false;
        },
        submitNewRisk() {
            if (!this.isNewRiskFormValid) return;

            const now = new Date();
            const newRisk = {
                id: `R${now.getFullYear()}${String(now.getMonth() + 1).padStart(2, '0')}${String(now.getDate()).padStart(2, '0')}${String(this.riskList.length + 1).padStart(2, '0')}`,
                type: this.newRiskForm.type,
                icon: this.newRiskForm.icon,
                iconBg: this.newRiskForm.iconBg,
                source: this.newRiskForm.source,
                description: this.newRiskForm.description,
                area: this.newRiskForm.area,
                location: this.newRiskForm.location,
                date: now.toISOString().split('T')[0],
                time: now.toTimeString().split(' ')[0],
                level: this.newRiskForm.level,
                levelClass: this.newRiskForm.levelClass
            };

            // 添加到风险列表的顶部
            this.riskList.unshift(newRisk);

            // 重置表单
            this.newRiskForm = {
                type: '',
                icon: '',
                iconBg: '',
                description: '',
                area: '',
                location: '',
                source: '',
                level: '',
                levelClass: ''
            };

            // 关闭模态框
            this.showAddRiskModal = false;

            // 更新筛选列表以显示新添加的风险
            this.applyFilters();
        },
        toggleRiskDropdown() {
            this.showRiskDropdown = !this.showRiskDropdown;
            this.showDepartmentDropdown = false;
        },
        toggleDepartmentDropdown() {
            this.showDepartmentDropdown = !this.showDepartmentDropdown;
            this.showRiskDropdown = false;
        },
        selectRiskForControl(risk) {
            this.selectedRiskForControl = risk;
            this.showRiskDropdown = false;
        },
        selectDepartment(dept) {
            this.controlForm.department = dept;
            this.showDepartmentDropdown = false;
        },
        submitControlMeasureFromAdd() {
            if (!this.isControlFormValid) return;
            const newControl = {
                risk: this.selectedRiskForControl.description,
                area: this.selectedRiskForControl.area,
                level: this.selectedRiskForControl.level,
                levelClass: this.selectedRiskForControl.levelClass,
                measure: this.controlForm.measure,
                department: this.controlForm.department,
                responsible: this.controlForm.responsible,
                deadline: this.controlForm.deadline,
                status: '进行中',
                statusClass: 'bg-blue-100 text-blue-800'
            };
            // 添加到控制措施列表
            this.controlList.unshift(newControl);
            // 重新应用筛选并更新分页
            this.applyControlFilters();
            if (this.pagination && this.pagination.control) {
                this.pagination.control.total = this.filteredControlList.length;
                this.pagination.control.currentPage = 1;
            }
            this.$forceUpdate();
            // 重置表单
            this.selectedRiskForControl = null;
            this.controlForm = {
                measure: '',
                department: '',
                responsible: '',
                deadline: ''
            };
            // 关闭模态框
            this.showAddControlModal = false;
            ElMessageBox.alert('控制措施已成功添加！', '提示', { type: 'success' });
        },
        viewRiskDetail(risk) {
            this.selectedRisk = risk;
            this.showRiskModal = true;
        },
        openAssessmentModal(risk) {
            this.assessmentRisk = risk;
            this.showAssessmentModal = true;
            this.resetAssessmentForm();
        },
        toggleProbabilityDropdown() {
            this.showProbabilityDropdown = !this.showProbabilityDropdown;
            this.showImpactDropdown = false;
        },
        toggleImpactDropdown() {
            this.showImpactDropdown = !this.showImpactDropdown;
            this.showProbabilityDropdown = false;
        },
        selectProbability(value) {
            this.assessmentForm.probability = value;
            this.showProbabilityDropdown = false;
        },
        selectImpact(value) {
            this.assessmentForm.impact = value;
            this.showImpactDropdown = false;
        },
        resetAssessmentForm() {
            this.assessmentForm = {
                probability: 0,
                impact: 0,
                reason: '',
                assessor: ''
            };
        },
        submitAssessment() {
            if (!this.isFormValid) return;

            // 获取概率和影响的文本标签
            const probabilityLabel = this.probabilityOptions[this.assessmentForm.probability - 1]?.label || '';
            const impactLabel = this.impactOptions[this.assessmentForm.impact - 1]?.label || '';
const riskLevel = this.calculateRiskLevel(this.assessmentForm.probability, this.assessmentForm.impact);

// 根据风险等级确定样式类
let levelClass = '';
switch(riskLevel) {
    case '高风险':
        levelClass = 'high-risk';
        break;
    case '中风险':
        levelClass = 'medium-risk';
        break;
    default:
        levelClass = 'low-risk';
}
            const riskLevelInfo = this.getRiskLevelInfo(this.assessmentForm.probability, this.assessmentForm.impact);
            const now = new Date();
            const pad = (n) => String(n).padStart(2, '0');
            const dateString = `${now.getFullYear()}-${pad(now.getMonth() + 1)}-${pad(now.getDate())} ${pad(now.getHours())}:${pad(now.getMinutes())}`;
                const assessment = {
                riskId: this.assessmentRisk.id,
                description: this.assessmentRisk.description,
                area: this.assessmentRisk.area,
                probability: probabilityLabel,
                impact: impactLabel,
                score: this.assessmentForm.probability * this.assessmentForm.impact,
                level: riskLevelInfo.label,
                levelClass: riskLevelInfo.class,
                reason: this.assessmentForm.reason,
                assessor: this.assessmentForm.assessor,
                date: dateString
            };

            // 添加到风险评估清单
            this.assessmentList.unshift(assessment);

            // 重新应用筛选和更新分页，确保评估清单立即显示新增记录
            this.applyAssessmentFilters();
            this.pagination.assessment.total = this.filteredAssessmentList.length;
            this.pagination.assessment.currentPage = 1;
            this.$forceUpdate();

            // 这里可以添加向后端提交评估数据的逻辑

            // 更新风险列表中的评估结果
            const riskIndex = this.riskList.findIndex(risk => risk.id === this.assessmentRisk.id);
            if (riskIndex !== -1) {
                this.riskList[riskIndex].level = riskLevelInfo.label;
                this.riskList[riskIndex].levelClass = riskLevelInfo.class;
            }

            // 重新渲染矩阵图
            this.$nextTick(() => {
                this.initRiskMatrixChart();
            });

            // 显示成功提示
            ElMessageBox.alert('评估提交成功！数据已添加到风险评估清单。', '提示', { type: 'success' });

            // 关闭模态框
            this.showAssessmentModal = false;
            // 提交后自动切换到“风险评估”页签
            this.activeTab = 'assessment';
        },
        // 查看评估详情
        viewAssessmentDetails(assessment, index) {
            this.selectedAssessment = { ...assessment, index };
            this.showAssessmentDetailModal = true;
        },
        // 控制评估
        controlAssessment(assessment, index) {
            this.selectedAssessment = { ...assessment, index };
            this.showAssessmentControlModal = true;
        },
        // 关闭评估详情模态框
        closeAssessmentDetailModal() {
            this.showAssessmentDetailModal = false;
            this.selectedAssessment = null;
        },
        // 关闭评估控制模态框
        closeAssessmentControlModal() {
            this.showAssessmentControlModal = false;
            this.selectedAssessment = null;
            // 重置控制表单
            this.controlForm = {
                measure: '',
                department: '',
                responsible: '',
                deadline: ''
            };
        },
        // 提交新增评估
        submitNewAssessment() {
            if (!this.isNewFormValid) {
                ElMessageBox.alert('请填写完整的评估信息！', '提示', { type: 'warning' });
                return;
            }

            // 计算风险评分和等级
            const score = this.calculateNewRiskScore;
            const riskLevel = this.calculateRiskLevel(this.newAssessmentForm.probability, this.newAssessmentForm.impact);
            
            // 转换可能性和影响程度为带描述的格式
            const probabilityLabels = {
                '1': '1 - 极不可能',
                '2': '2 - 不太可能', 
                '3': '3 - 可能',
                '4': '4 - 很可能',
                '5': '5 - 几乎确定'
            };
            
            const impactLabels = {
                '1': '1 - 微不足道',
                '2': '2 - 轻微',
                '3': '3 - 中等', 
                '4': '4 - 严重',
                '5': '5 - 灾难性'
            };
            
            // 创建新的评估记录
            const newAssessment = {
                description: this.newAssessmentForm.description,
                area: this.newAssessmentForm.area,
                probability: probabilityLabels[this.newAssessmentForm.probability],
                impact: impactLabels[this.newAssessmentForm.impact],
                score: score.toString(),
                level: riskLevel,
                levelClass: this.getRiskLevelClass(riskLevel),
                date: new Date().toLocaleDateString('zh-CN'),
                assessor: '当前用户' // 这里可以替换为实际的用户信息
            };

            // 添加到评估列表顶部，便于立即可见
            this.assessmentList.unshift(newAssessment);
            
            // 重新应用筛选和更新分页
            this.applyAssessmentFilters();
            this.pagination.assessment.total = this.filteredAssessmentList.length;
            this.pagination.assessment.currentPage = 1;
            
            // 强制触发重新渲染
            this.$forceUpdate();
            
            // 显示成功提示
            ElMessageBox.alert('评估提交成功！', '提示', { type: 'success' });
            
            // 关闭模态框并重置表单
            this.showNewAssessmentModal = false;
            // 提交后自动切换到“风险评估”页签
            this.activeTab = 'assessment';
            this.resetNewAssessmentForm();
            
        },
        // 重置新增评估表单
        resetNewAssessmentForm() {
            this.newAssessmentForm = {
                description: '',
                area: '',
                probability: '',
                impact: ''
            };
            this.newAssessmentType = 'manual';
        },
        // 关闭新增评估模态框
        closeNewAssessmentModal() {
            this.showNewAssessmentModal = false;
            this.resetNewAssessmentForm();
        },
        // 打开控制详情
        openControlDetail(control) {
            if (!control) return;
            this.selectedControl = { ...control };
            // 补充样式类以防缺失
            this.selectedControl.levelClass = this.selectedControl.levelClass || (this.getRiskLevelInfo(this.selectedControl.level).class);
            this.selectedControl.statusClass = this.selectedControl.statusClass || this.getControlStatusClass(this.selectedControl.status);
            this.showControlDetailModal = true;
        },
        // 关闭控制详情
        closeControlDetailModal() {
            this.showControlDetailModal = false;
            this.selectedControl = null;
        },
        // 打开更新控制
        openUpdateControl(control) {
            if (!control) return;
            this.selectedControl = control;
            this.updateControlForm = {
                id: control.id || null,
                measure: control.measure || '',
                department: control.department || '',
                responsible: control.responsible || '',
                deadline: control.deadline || '',
                status: control.status || ''
            };
            this.showUpdateControlModal = true;
            this.showUpdateDepartmentDropdown = false;
            this.showUpdateStatusDropdown = false;
        },
        // 关闭更新控制
        closeUpdateControlModal() {
            this.showUpdateControlModal = false;
            this.updateControlForm = {
                id: null, measure: '', department: '', responsible: '', deadline: '', status: ''
            };
        },
        // 更新-部门下拉
        toggleUpdateDepartmentDropdown() {
            this.showUpdateDepartmentDropdown = !this.showUpdateDepartmentDropdown;
            this.showUpdateStatusDropdown = false;
        },
        selectUpdateDepartment(dept) {
            this.updateControlForm.department = dept;
            this.showUpdateDepartmentDropdown = false;
        },
        // 更新-状态下拉
        toggleUpdateStatusDropdown() {
            this.showUpdateStatusDropdown = !this.showUpdateStatusDropdown;
            this.showUpdateDepartmentDropdown = false;
        },
        selectUpdateStatus(status) {
            this.updateControlForm.status = status;
            this.showUpdateStatusDropdown = false;
        },
        // 提交更新控制
        submitUpdateControl() {
            if (!this.isUpdateControlFormValid) {
                ElMessageBox.alert('请完整填写更新信息！', '提示', { type: 'warning' });
                return;
            }
            // 在原始列表中找到该控制项并更新
            const idx = this.controlList.findIndex(c => c === this.selectedControl || (this.selectedControl && this.selectedControl.id && c.id === this.selectedControl.id));
            const updated = {
                ...this.selectedControl,
                measure: this.updateControlForm.measure,
                department: this.updateControlForm.department,
                responsible: this.updateControlForm.responsible,
                deadline: this.updateControlForm.deadline,
                status: this.updateControlForm.status,
                statusClass: this.getControlStatusClass(this.updateControlForm.status)
            };
            if (idx !== -1) {
                this.$set ? this.$set(this.controlList, idx, updated) : (this.controlList.splice(idx, 1, updated));
            } else if (this.selectedControl) {
                Object.assign(this.selectedControl, updated);
            }
            // 重新应用控制筛选与分页统计
            this.applyControlFilters();
            if (this.pagination && this.pagination.control) {
                this.pagination.control.total = this.filteredControlList.length;
                const totalPages = Math.max(1, Math.ceil(this.filteredControlList.length / this.pagination.control.pageSize));
                if (this.pagination.control.currentPage > totalPages) {
                    this.pagination.control.currentPage = totalPages;
                }
            }
            this.$forceUpdate();
            ElMessageBox.alert('控制措施更新成功！', '提示', { type: 'success' });
            this.closeUpdateControlModal();
        },
        // 状态对应样式类
        getControlStatusClass(status) {
            switch (status) {
                case '待处理': return 'bg-yellow-100 text-yellow-800';
                case '进行中': return 'bg-blue-100 text-blue-800';
                case '已完成': return 'bg-green-100 text-green-800';
                case '已关闭': return 'bg-gray-200 text-gray-700';
                default: return 'bg-gray-100 text-gray-700';
            }
        },
        // 提交控制措施
        submitControlMeasure() {
            if (!this.controlForm.measure || !this.controlForm.department || !this.controlForm.responsible || !this.controlForm.deadline) {
                ElMessageBox.alert('请填写完整的控制措施信息！', '提示', { type: 'warning' });
                return;
            }
            
            // 创建新的控制记录
            const newControl = {
                risk: this.selectedAssessment.description,
                area: this.selectedAssessment.area,
                level: this.selectedAssessment.level,
                levelClass: this.selectedAssessment.levelClass,
                measure: this.controlForm.measure,
                department: this.controlForm.department,
                responsible: this.controlForm.responsible,
                deadline: this.controlForm.deadline,
                status: '待处理',
                statusClass: 'bg-yellow-100 text-yellow-800'
            };
            
            // 添加到控制列表
            this.controlList.push(newControl);
            
            ElMessageBox.alert('控制措施已成功提交！', '提示', { type: 'success' });
            this.closeAssessmentControlModal();
        },
        deleteAssessment(index) {
            if (!Number.isInteger(index)) return;
            ElMessageBox.confirm('确定要删除这条评估记录吗？', '确认删除', {
                type: 'warning',
                confirmButtonText: '删除',
                cancelButtonText: '取消'
            }).then(() => {
                // 从当前页的分页列表中取到实际对象
                const item = this.paginatedAssessmentList[index];
                if (!item) {
                    ElMessage.error('删除失败：未找到该评估记录');
                    return;
                }

                // 在原始评估列表中定位该对象的真实索引
                let realIndex = this.assessmentList.findIndex(a => a === item);
                if (realIndex === -1) {
                    // 回退到根据关键字段匹配（避免对象引用不一致）
                    realIndex = this.assessmentList.findIndex(a =>
                        a.description === item.description &&
                        a.area === item.area &&
                        a.assessor === item.assessor &&
                        a.date === item.date &&
                        a.level === item.level &&
                        a.score === item.score
                    );
                }

                if (realIndex === -1) {
                    ElMessage.error('删除失败：无法定位评估记录');
                    return;
                }

                // 删除并重新应用评估筛选
                this.assessmentList.splice(realIndex, 1);
                this.applyAssessmentFilters();

                // 更新分页总数并校正当前页
                this.pagination.assessment.total = this.filteredAssessmentList.length;
                const totalPages = this.assessmentTotalPages;
                if (this.pagination.assessment.currentPage > totalPages) {
                    this.pagination.assessment.currentPage = Math.max(1, totalPages);
                }

                // 强制触发重新渲染
                this.$forceUpdate();
                ElMessage.success('评估记录已删除！');
            }).catch(() => {});
        },
        deleteRisk(risk) {
            ElMessageBox.confirm(`确定要删除风险"${risk.description}"吗？`, '确认删除', {
                type: 'warning',
                confirmButtonText: '删除',
                cancelButtonText: '取消'
            }).then(() => {
                const index = this.riskList.findIndex(r => r.id === risk.id);
                if (index !== -1) {
                    // 删除风险记录
                    this.riskList.splice(index, 1);

                    // 同时删除相关的评估记录
                    this.assessmentList = this.assessmentList.filter(assessment => assessment.riskId !== risk.id);

                    // 重新应用过滤器，更新filteredRiskList
                    this.applyFilters();

                    // 强制触发重新渲染
                    this.$forceUpdate();
                    ElMessage.success('风险记录已删除！');
                } else {
                    ElMessage.error('删除失败：未找到该风险记录！');
                }
            }).catch(() => {});
        },
        toggleMenu(index) {
            this.mainMenus[index].expanded = !this.mainMenus[index].expanded;
            // 如果展开了菜单，则将其他菜单收起
            if (this.mainMenus[index].expanded) {
                this.mainMenus.forEach((menu, i) => {
                    if (i !== index) {
                        menu.expanded = false;
                    }
                });
            }
        },
        selectSubmenu(menuIndex, submenuIndex) {
            // 重置所有菜单的激活状态
            this.mainMenus.forEach(menu => {
                menu.active = false;
                menu.subMenus.forEach(submenu => {
                    submenu.active = false;
                });
            });
            // 设置当前选中的菜单和子菜单为激活状态
            this.mainMenus[menuIndex].active = true;
            this.mainMenus[menuIndex].subMenus[submenuIndex].active = true;
            const link = this.mainMenus[menuIndex].subMenus[submenuIndex].link;
            if (link) {
                const dest = link.startsWith('/') ? link : `/${link}`;
                this.$router.push(dest);
            }
        },

        handleResize() {
            const charts = [
                this.$refs.riskLevelChart,
                this.$refs.riskTrendChart,
                this.$refs.riskSourceChart,
                this.$refs.riskMatrixChart
            ];
            if (this._resizeRaf) {
                cancelAnimationFrame(this._resizeRaf);
            }
            this._resizeRaf = requestAnimationFrame(() => {
                charts.forEach(ref => {
                    if (!ref) return;
                    const chart = echarts.getInstanceByDom(ref);
                    if (chart) chart.resize();
                });
            });
        },
        initRiskLevelChart() {
            const chart = echarts.init(this.$refs.riskLevelChart);
            const option = {
                animation: false,
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)'
                },
                legend: {
                    orient: 'vertical',
                    right: 10,
                    top: 'center',
                    data: ['高风险', '中风险', '低风险']
                },
                series: [
                    {
                        name: '风险等级',
                        type: 'pie',
                        radius: ['45%', '70%'],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderRadius: 10,
                            borderColor: '#fff',
                            borderWidth: 2
                        },
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '14',
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: (() => {
                            const list = Array.isArray(this.filteredRiskList) && this.filteredRiskList.length >= 0
                                ? this.filteredRiskList
                                : (this.riskList || []);
                            const high = list.filter(r => r.level === '高风险').length;
                            const medium = list.filter(r => r.level === '中风险').length;
                            const low = list.filter(r => r.level === '低风险').length;
                            return [
                                { value: high, name: '高风险', itemStyle: { color: '#f56565' } },
                                { value: medium, name: '中风险', itemStyle: { color: '#ed8936' } },
                                { value: low, name: '低风险', itemStyle: { color: '#ecc94b' } }
                            ];
                        })()
                    }
                ]
            };
            chart.setOption(option);
            // 初始化后根据当前筛选结果再次更新，确保数据同步
            this.updateRiskLevelChart();
        },

        // 动态更新风险等级分布图表
        updateRiskLevelChart() {
            if (!this.$refs.riskLevelChart) return;
            const chart = echarts.getInstanceByDom(this.$refs.riskLevelChart) || echarts.init(this.$refs.riskLevelChart);
            const list = Array.isArray(this.filteredRiskList) && this.filteredRiskList.length >= 0
                ? this.filteredRiskList
                : (this.riskList || []);
            const high = list.filter(r => r.level === '高风险').length;
            const medium = list.filter(r => r.level === '中风险').length;
            const low = list.filter(r => r.level === '低风险').length;

            chart.setOption({
                series: [
                    {
                        name: '风险等级',
                        type: 'pie',
                        radius: ['45%', '70%'],
                        data: [
                            { value: high, name: '高风险', itemStyle: { color: '#f56565' } },
                            { value: medium, name: '中风险', itemStyle: { color: '#ed8936' } },
                            { value: low, name: '低风险', itemStyle: { color: '#ecc94b' } }
                        ]
                    }
                ]
            });
        },
        initRiskTrendChart() {
            const chart = echarts.init(this.$refs.riskTrendChart);
            const option = {
                animation: false,
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                legend: {
                    data: ['高风险', '中风险', '低风险'],
                    top: 0,
                    right: 0,
                    itemWidth: 12,
                    itemHeight: 8,
                    textStyle: {
                        fontSize: 10
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    top: '25%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        data: [],
                        axisLine: {
                            lineStyle: {
                                color: '#e2e8f0'
                            }
                        },
                        axisLabel: {
                            color: '#718096',
                            fontSize: 10
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            color: '#718096',
                            fontSize: 10
                        },
                        splitLine: {
                            lineStyle: {
                                color: '#e2e8f0'
                            }
                        }
                    }
                ],
                series: [
                    {
                        name: '高风险',
                        type: 'line',
                        stack: 'Total',
                        areaStyle: {
                            opacity: 0.3
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        itemStyle: {
                            color: '#f56565'
                        },
                        data: []
                    },
                    {
                        name: '中风险',
                        type: 'line',
                        stack: 'Total',
                        areaStyle: {
                            opacity: 0.3
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        itemStyle: {
                            color: '#ed8936'
                        },
                        data: []
                    },
                    {
                        name: '低风险',
                        type: 'line',
                        stack: 'Total',
                        areaStyle: {
                            opacity: 0.3
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        itemStyle: {
                            color: '#ecc94b'
                        },
                        data: []
                    }
                ]
            };
            chart.setOption(option);
            // 初始化后立即根据当前筛选数据进行动态更新
            this.updateRiskTrendChart();
        },
        updateRiskTrendChart() {
            if (!this.$refs.riskTrendChart) return;
            const chart = echarts.getInstanceByDom(this.$refs.riskTrendChart) || echarts.init(this.$refs.riskTrendChart);
            const list = Array.isArray(this.filteredRiskList) && this.filteredRiskList.length >= 0
                ? this.filteredRiskList
                : (this.riskList || []);

            // 提取并排序唯一日期（YYYY-MM-DD）
            const uniqueDates = Array.from(new Set(list.map(r => r.date).filter(Boolean)))
                .sort((a, b) => new Date(a) - new Date(b));

            // 根据时间范围选择最大点数，避免过多标签挤压
            const maxPoints = this.filterConditions && this.filterConditions.timeRange === '三十天内' ? 10 : 7;
            const finalDates = uniqueDates.slice(-maxPoints);

            // 生成展示标签 M/D
            const labels = finalDates.map(d => {
                const dt = new Date(d);
                return `${dt.getMonth() + 1}/${dt.getDate()}`;
            });

            // 统计各风险等级在每个日期的数量
            const countBy = (level) => finalDates.map(d => list.filter(r => r.date === d && r.level === level).length);
            const highData = countBy('高风险');
            const mediumData = countBy('中风险');
            const lowData = countBy('低风险');

            // 重新设置完整配置以避免合并冲突
            chart.clear();
            const option = {
                animation: false,
                tooltip: {
                    trigger: 'axis',
                    axisPointer: { type: 'cross', label: { backgroundColor: '#6a7985' } }
                },
                legend: {
                    data: ['高风险', '中风险', '低风险'],
                    top: 0,
                    right: 0,
                    itemWidth: 12,
                    itemHeight: 8,
                    textStyle: { fontSize: 10 }
                },
                grid: { left: '3%', right: '4%', bottom: '3%', top: '25%', containLabel: true },
                xAxis: [{
                    type: 'category',
                    boundaryGap: false,
                    data: labels,
                    axisLine: { lineStyle: { color: '#e2e8f0' } },
                    axisLabel: { color: '#718096', fontSize: 10 }
                }],
                yAxis: [{
                    type: 'value',
                    axisLine: { show: false },
                    axisTick: { show: false },
                    axisLabel: { color: '#718096', fontSize: 10 },
                    splitLine: { lineStyle: { color: '#e2e8f0' } }
                }],
                series: [
                    { name: '高风险', type: 'line', stack: 'Total', areaStyle: { opacity: 0.3 }, emphasis: { focus: 'series' }, itemStyle: { color: '#f56565' }, data: highData },
                    { name: '中风险', type: 'line', stack: 'Total', areaStyle: { opacity: 0.3 }, emphasis: { focus: 'series' }, itemStyle: { color: '#ed8936' }, data: mediumData },
                    { name: '低风险', type: 'line', stack: 'Total', areaStyle: { opacity: 0.3 }, emphasis: { focus: 'series' }, itemStyle: { color: '#ecc94b' }, data: lowData }
                ]
            };
            // 使用下一帧确保不与其它渲染流程冲突
            if (this._resizeRaf) cancelAnimationFrame(this._resizeRaf);
            this._resizeRaf = requestAnimationFrame(() => {
                chart.setOption(option);
            });
        },
        initRiskSourceChart() {
            const chart = echarts.init(this.$refs.riskSourceChart);
            const option = {
                animation: false,
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    show: false
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    top: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        color: '#718096',
                        fontSize: 10
                    },
                    splitLine: {
                        lineStyle: {
                            color: '#e2e8f0'
                        }
                    }
                },
                yAxis: {
                    type: 'category',
                    data: ['其他', '人工上报', '环境监测', '安全巡检', '设备监测'],
                    axisLine: {
                        lineStyle: {
                            color: '#e2e8f0'
                        }
                    },
                    axisLabel: {
                        color: '#718096',
                        fontSize: 10
                    }
                },
                series: [
                    {
                        name: '风险数量',
                        type: 'bar',
                        barWidth: '60%',
                        data: [
                            { value: 5, itemStyle: { color: '#a0aec0' } },
                            { value: 8, itemStyle: { color: '#4299e1' } },
                            { value: 12, itemStyle: { color: '#48bb78' } },
                            { value: 18, itemStyle: { color: '#ed8936' } },
                            { value: 25, itemStyle: { color: '#f56565' } }
                        ],
                        label: {
                            show: true,
                            position: 'right',
                            fontSize: 10
                        }
                    }
                ]
            };
            chart.setOption(option);
            // 初始化后立即根据当前筛选结果更新图表
            this.updateRiskSourceChart();
        },
        // 动态更新风险来源统计图表
        updateRiskSourceChart() {
            if (!this.$refs.riskSourceChart) return;
            const chart = echarts.getInstanceByDom(this.$refs.riskSourceChart) || echarts.init(this.$refs.riskSourceChart);
            const list = Array.isArray(this.filteredRiskList) && this.filteredRiskList.length >= 0
                ? this.filteredRiskList
                : (this.riskList || []);

            const sourceCategories = ['人工上报', '自动监测', '设备监测', '安全巡检', '环境监测'];
            const colorMap = {
                '其他': '#a0aec0',
                '人工上报': '#4299e1',
                '环境监测': '#48bb78',
                '安全巡检': '#ed8936',
                '设备监测': '#f56565',
                '自动监测': '#3182ce',
                '第三方检测': '#805ad5'
            };

            const counts = {};
            sourceCategories.forEach(cat => counts[cat] = 0);
            list.forEach(risk => {
                const src = ((risk && risk.source) || '').trim();
                const cat = sourceCategories.includes(src) ? src : (src ? '其他' : '其他');
                counts[cat]++;
            });

            const yAxisData = sourceCategories;
            const seriesData = sourceCategories.map(cat => ({
                value: counts[cat],
                itemStyle: { color: colorMap[cat] || '#a0aec0' }
            }));

            // 清理后完整设置配置，避免合并导致的渲染异常
            chart.clear();
            const option = {
                animation: false,
                tooltip: {
                    trigger: 'axis',
                    axisPointer: { type: 'shadow' }
                },
                legend: { show: false },
                grid: {
                    left: '3%', right: '4%', bottom: '3%', top: '3%', containLabel: true
                },
                xAxis: {
                    type: 'value',
                    axisLine: { show: false },
                    axisTick: { show: false },
                    axisLabel: { color: '#718096', fontSize: 10 },
                    splitLine: { lineStyle: { color: '#e2e8f0' } }
                },
                yAxis: {
                    type: 'category',
                    data: yAxisData,
                    axisLine: { lineStyle: { color: '#e2e8f0' } },
                    axisLabel: { color: '#718096', fontSize: 10 }
                },
                series: [
                    {
                        name: '风险数量',
                        type: 'bar',
                        barWidth: '60%',
                        data: seriesData,
                        label: { show: true, position: 'right', fontSize: 10 }
                    }
                ]
            };
            chart.setOption(option);
        },
        initRiskMatrixChart() {
            // 触发热更新

            this.$nextTick(() => {

                if (this.$refs.riskMatrixChart) {

                    // 强制设置容器尺寸
                    try {
                        const chartDom = this.$refs.riskMatrixChart;
                        
                        // 强制设置尺寸
                        chartDom.style.height = '320px';
                        chartDom.style.width = '100%';
                        chartDom.style.minHeight = '320px';
                    } catch (e) {
                        
                    }

                    // 先销毁已存在的图表实例
                    const existingChart = echarts.getInstanceByDom(this.$refs.riskMatrixChart);
                    if (existingChart) {
                        existingChart.dispose();
                    }
                    const chart = echarts.init(this.$refs.riskMatrixChart);

                    // 动态生成矩阵数据
                    const matrixData = this.generateMatrixData();
                    // 根据数据动态计算最大值，用于可视化映射
                    const maxCount = Math.max(...matrixData.map(d => d[2]), 1);

                    const option = {
                        animation: true,
                        animationDuration: 1000,
                        tooltip: {
                            position: 'top',
                            backgroundColor: 'rgba(50, 50, 50, 0.9)',
                            borderColor: '#333',
                            borderWidth: 1,
                            textStyle: {
                                color: '#fff',
                                fontSize: 12
                            },
                            formatter: function (params) {
                                const data = params.data;
                                const riskCount = data[2];
                                const riskLevel = data[3];
                                const riskDetails = data[4] || [];

                                let tooltip = `<div style="padding: 8px;">
                                    <div style="font-weight: bold; margin-bottom: 8px; color: #fff;">
                                        可能性: ${params.value[0] + 1} | 影响程度: ${params.value[1] + 1}
                                    </div>
                                    <div style="margin-bottom: 6px;">
                                        风险数量: <span style="color: #ffd700;">${riskCount}</span>
                                    </div>
                                    <div style="margin-bottom: 8px;">
                                        风险等级: <span style="color: ${riskLevel === '高风险' ? '#ff6b6b' : riskLevel === '中风险' ? '#ffa726' : '#66bb6a'};">${riskLevel}</span>
                                    </div>`;

                                if (riskDetails.length > 0) {
                                    tooltip += `<div style="border-top: 1px solid #666; padding-top: 6px; margin-top: 6px;">
                                        <div style="font-size: 11px; color: #ccc; margin-bottom: 4px;">相关风险:</div>`;
                                    riskDetails.slice(0, 3).forEach(risk => {
                                        tooltip += `<div style="font-size: 10px; color: #ddd; margin-bottom: 2px;">• ${risk.description.substring(0, 20)}...</div>`;
                                    });
                                    if (riskDetails.length > 3) {
                                        tooltip += `<div style="font-size: 10px; color: #999;">...还有${riskDetails.length - 3}个风险</div>`;
                                    }
                                    tooltip += `</div>`;
                                }

                                tooltip += `</div>`;
                                return tooltip;
                            }
                        },
                        grid: {
                            left: '8%',
                            right: '12%',
                            bottom: '15%',
                            top: '10%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'category',
                            data: ['1-极少', '2-不太可能', '3-可能', '4-很可能', '5-几乎确定'],
                            splitArea: {
                                show: true,
                                areaStyle: {
                                    color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)']
                                }
                            },
                            axisLabel: {
                                color: '#4a5568',
                                fontSize: 11,
                                interval: 0,
                                rotate: 0,
                                margin: 8
                            },
                            axisLine: {
                                lineStyle: {
                                    color: '#e2e8f0'
                                }
                            },
                            axisTick: {
                                show: false
                            },
                            name: '可能性',
                            nameLocation: 'middle',
                            nameGap: 35,
                            nameTextStyle: {
                                color: '#2d3748',
                                fontSize: 13,
                                fontWeight: 'bold'
                            }
                        },
                        yAxis: {
                            type: 'category',
                            data: ['1-可忽略', '2-轻微', '3-中等', '4-严重', '5-灾难性'],
                            splitArea: {
                                show: true,
                                areaStyle: {
                                    color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)']
                                }
                            },
                            axisLabel: {
                                color: '#4a5568',
                                fontSize: 11,
                                margin: 8
                            },
                            axisLine: {
                                lineStyle: {
                                    color: '#e2e8f0'
                                }
                            },
                            axisTick: {
                                show: false
                            },
                            name: '影响程度',
                            nameLocation: 'middle',
                            nameGap: 50,
                            nameTextStyle: {
                                color: '#2d3748',
                                fontSize: 13,
                                fontWeight: 'bold'
                            }
                        },
                        visualMap: {
                            min: 0,
                            max: maxCount,
                            calculable: true,
                            orient: 'horizontal',
                            left: 'center',
                            bottom: '2%',
                            text: ['高风险', '低风险'],
                            textStyle: {
                                color: '#4a5568',
                                fontSize: 11
                            },
                            inRange: {
                                color: ['#e6f7ff', '#91d5ff', '#40a9ff', '#1890ff', '#096dd9', '#0050b3']
                            },
                            controller: {
                                inRange: {
                                    color: ['#c6e2ff', '#91d5ff', '#40a9ff']
                                }
                            }
                        },
                        series: [
                            {
                                name: '风险矩阵',
                                type: 'heatmap',
                                data: matrixData,
                                label: {
                                    show: true,
                                    color: '#fff',
                                    fontSize: 11,
                                    fontWeight: 'bold',
                                    formatter: function (params) {
                                        return params.value[2] > 0 ? params.value[2] : '';
                                    }
                                },
                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 15,
                                        shadowColor: 'rgba(0, 0, 0, 0.4)',
                                        borderColor: '#fff',
                                        borderWidth: 2
                                    },
                                    label: {
                                        fontSize: 13,
                                        fontWeight: 'bold'
                                    }
                                },
                                itemStyle: {
                                    borderRadius: 4,
                                    borderColor: '#fff',
                                    borderWidth: 1
                                }
                            }
                        ]
                    };

                    // 添加点击事件
                    chart.on('click', (params) => {
                        if (params.componentType === 'series' && params.value[2] > 0) {
                            this.showMatrixRiskDetails(params.value[0] + 1, params.value[1] + 1, params.value[4]);
                        }
                    });

                    try {
                        chart.setOption(option);

                        // 验证图表是否正确渲染
                        setTimeout(() => {
                            const chartDom = this.$refs.riskMatrixChart;
                        }, 100);

                        // 监听窗口大小变化
                        window.addEventListener('resize', () => {
                            chart.resize();
                        });
                    } catch (error) {

                        // 尝试简化版本
                        const simpleOption = {
                            title: {
                                text: '风险矩阵图测试',
                                left: 'center'
                            },
                            xAxis: {
                                type: 'category',
                                data: ['1', '2', '3', '4', '5']
                            },
                            yAxis: {
                                type: 'category',
                                data: ['1', '2', '3', '4', '5']
                            },
                            series: [{
                                type: 'heatmap',
                                data: [[0, 0, 1], [1, 1, 2], [2, 2, 3]]
                            }]
                        };
                        chart.setOption(simpleOption);
                    }
                }
            })
        },

        // 刷新风险矩阵图
        refreshRiskMatrixChart() {

            // 先清理现有图表
            if (this.$refs.riskMatrixChart) {
                const existingChart = echarts.getInstanceByDom(this.$refs.riskMatrixChart);
                if (existingChart) {
                    existingChart.dispose();
                }
            }

            // 延迟重新初始化
            this.$nextTick(() => {
                setTimeout(() => {
                    this.initRiskMatrixChart();
                }, 100);
            });
        },

        // 生成矩阵数据
        generateMatrixData() {
            const matrix = [];

            // 初始化5x5矩阵
            for (let probability = 0; probability < 5; probability++) {
                for (let impact = 0; impact < 5; impact++) {
                    matrix.push([probability, impact, 0, '低风险', []]);
                }
            }

            // 根据筛选后的评估数据填充矩阵（动态数据）
            const sourceList = Array.isArray(this.filteredAssessmentList) && this.filteredAssessmentList.length >= 0
                ? this.filteredAssessmentList
                : (this.assessmentList || []);

            sourceList.forEach((assessment, idx) => {
                const probability = this.extractNumericValue(assessment.probability) - 1;
                const impact = this.extractNumericValue(assessment.impact) - 1;

                if (probability >= 0 && probability < 5 && impact >= 0 && impact < 5) {
                    const index = impact * 5 + probability;
                    if (matrix[index]) {
                        matrix[index][2]++; // 增加风险数量
                        matrix[index][3] = this.calculateRiskLevel(probability + 1, impact + 1); // 更新风险等级
                        matrix[index][4].push(assessment); // 添加风险详情
                    }
                }
            });

            return matrix;
        },

        // 提取数字值
        extractNumericValue(str) {
            const match = str.match(/^(\d+)/);
            return match ? parseInt(match[1]) : 0;
        },

        // 计算风险等级
        calculateRiskLevel(probability, impact) {
            const score = probability * impact;
            if (score >= 15) return '高风险';
            if (score >= 9) return '中风险';
            return '低风险';
        },
        getRiskLevelInfo(probability, impact) {
        const level = this.calculateRiskLevel(probability, impact);
        let className = '';
        switch(level) {
            case '高风险':
            className = 'bg-red-100 text-red-800';
            break;
        case '中风险':
            className = 'bg-yellow-100 text-yellow-800';
            break;
        case '低风险':
            className = 'bg-green-100 text-green-800';
            break;
        default:
            className = 'bg-gray-100 text-gray-800';
        }
        return {
            label: level,
            class: className
        };
    },
        // 显示矩阵风险详情
        showMatrixRiskDetails(probability, impact, risks) {
            if (risks && risks.length > 0) {
                const riskLevel = this.calculateRiskLevel(probability, impact);
                const riskCount = risks.length;

                let message = `风险等级: ${riskLevel}\n`;
                message += `可能性: ${probability} | 影响程度: ${impact}\n`;
                message += `风险数量: ${riskCount}\n\n`;
                message += '相关风险:\n';

                risks.forEach((risk, index) => {
                    message += `${index + 1}. ${risk.description}\n`;
                    message += `   区域: ${risk.area}\n`;
                    message += `   评估人: ${risk.assessor}\n`;
                    message += `   时间: ${risk.date}\n\n`;
                });

                ElMessageBox.alert(message, '风险详情');
            }
        },

        // 导出筛选结果（Excel格式）
        exportFilteredDataToExcel() {
            try {
                // 准备导出数据
                const exportData = this.filteredRiskList.map((risk, index) => ({
                    '序号': index + 1,
                    '风险编号': risk.id,
                    '风险类型': risk.type,
                    '风险描述': risk.description,
                    '风险区域': risk.area,
                    '具体位置': risk.location,
                    '风险来源': risk.source,
                    '风险等级': risk.level,
                    '上报人': risk.reporter || '',
                    '处理状态': risk.status || '待处理',
                    '识别日期': risk.date,
                    '识别时间': risk.time
                }));

                if (exportData.length === 0) {
                    ElMessageBox.alert('没有可导出的数据！', '提示', { type: 'warning' });
                    return;
                }

                // 创建CSV内容（Excel兼容格式）
                const headers = Object.keys(exportData[0]);
                const csvContent = [
                    headers.join(','),
                    ...exportData.map(row =>
                        headers.map(header => `"${(row[header] || '').toString().replace(/"/g, '""')}"`).join(',')
                    )
                ].join('\n');

                // 创建并下载文件
                const blob = new Blob(['\uFEFF' + csvContent], { type: 'text/csv;charset=utf-8;' });
                const link = document.createElement('a');
                const url = URL.createObjectURL(blob);
                link.setAttribute('href', url);
                link.setAttribute('download', `风险筛选结果_${new Date().toISOString().split('T')[0]}.csv`);
                link.style.visibility = 'hidden';
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
                URL.revokeObjectURL(url);

                ElMessageBox.alert(`成功导出 ${exportData.length} 条筛选结果到Excel文件！`, '提示', { type: 'success' });
            } catch (error) {
                ElMessageBox.alert('导出失败，请重试！', '提示', { type: 'error' });
            }
        },

        // 导出筛选结果（PDF格式）
        exportFilteredDataToPDF() {
            try {
                const exportData = this.filteredRiskList;

                if (exportData.length === 0) {
                    ElMessageBox.alert('没有可导出的数据！', '提示', { type: 'warning' });
                    return;
                }

                // 创建PDF内容（简化版，实际项目中可使用jsPDF等库）
                let pdfContent = `风险筛选结果报告\n`;
                pdfContent += `生成时间: ${new Date().toLocaleString()}\n`;
                pdfContent += `筛选条件: ${this.getActiveFiltersText()}\n`;
                pdfContent += `共筛选出 ${exportData.length} 条风险记录\n\n`;

                exportData.forEach((risk, index) => {
                    pdfContent += `${index + 1}. 风险编号: ${risk.id}\n`;
                    pdfContent += `   风险类型: ${risk.type}\n`;
                    pdfContent += `   风险描述: ${risk.description}\n`;
                    pdfContent += `   风险区域: ${risk.area}\n`;
                    pdfContent += `   风险等级: ${risk.level}\n`;
                    pdfContent += `   识别时间: ${risk.date} ${risk.time}\n\n`;
                });

                // 创建并下载文件
                const blob = new Blob([pdfContent], { type: 'text/plain;charset=utf-8;' });
                const link = document.createElement('a');
                const url = URL.createObjectURL(blob);
                link.setAttribute('href', url);
                link.setAttribute('download', `风险筛选结果_${new Date().toISOString().split('T')[0]}.txt`);
                link.style.visibility = 'hidden';
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
                URL.revokeObjectURL(url);

                ElMessageBox.alert(`成功导出 ${exportData.length} 条筛选结果到文本文件！`, '提示', { type: 'success' });
            } catch (error) {
                ElMessageBox.alert('导出失败，请重试！', '提示', { type: 'error' });
            }
        },

        // 获取当前激活筛选条件的文本描述
        getActiveFiltersText() {
            const filters = [];

            if (this.filterConditions.riskLevels && !this.filterConditions.riskLevels.includes('全部')) {
                filters.push(`风险等级: ${this.filterConditions.riskLevels.join(', ')}`);
            }

            if (this.filterConditions.area && this.filterConditions.area !== '全部区域') {
                filters.push(`区域: ${this.filterConditions.area}`);
            }

            if (this.filterConditions.timeRange && this.filterConditions.timeRange !== '全部时间') {
                filters.push(`时间范围: ${this.filterConditions.timeRange}`);
            }

            if (this.filterConditions.riskType && this.filterConditions.riskType !== '全部类型') {
                filters.push(`风险类型: ${this.filterConditions.riskType}`);
            }

            if (this.filterConditions.source) {
                filters.push(`风险来源: ${this.filterConditions.source}`);
            }

            if (this.filterConditions.status) {
                filters.push(`处理状态: ${this.filterConditions.status}`);
            }

            if (this.filterConditions.keyword) {
                filters.push(`关键词: ${this.filterConditions.keyword}`);
            }

            if (this.filterConditions.reporter) {
                filters.push(`上报人: ${this.filterConditions.reporter}`);
            }

            if (this.filterConditions.riskId) {
                filters.push(`风险ID: ${this.filterConditions.riskId}`);
            }

            return filters.length > 0 ? filters.join('; ') : '无筛选条件';
        },

        // 导出风险识别清单数据
        exportRiskData() {
            try {
                // 准备导出数据
                const exportData = this.filteredRiskList.map(risk => ({
                    '风险编号': risk.id,
                    '风险类型': risk.type,
                    '风险描述': risk.description,
                    '风险区域': risk.area,
                    '风险位置': risk.location,
                    '风险来源': risk.source,
                    '风险等级': risk.level,
                    '识别时间': risk.identifiedAt
                }));

                // 创建CSV内容
                const headers = Object.keys(exportData[0] || {});
                const csvContent = [
                    headers.join(','),
                    ...exportData.map(row => headers.map(header => `"${row[header] || ''}"`).join(','))
                ].join('\n');

                // 创建并下载文件
                const blob = new Blob(['\uFEFF' + csvContent], { type: 'text/csv;charset=utf-8;' });
                const link = document.createElement('a');
                const url = URL.createObjectURL(blob);
                link.setAttribute('href', url);
                link.setAttribute('download', `风险识别清单_${new Date().toISOString().split('T')[0]}.csv`);
                link.style.visibility = 'hidden';
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);

                ElMessageBox.alert('风险识别清单导出成功！', '提示', { type: 'success' });
            } catch (error) {
                ElMessageBox.alert('导出失败，请重试！', '提示', { type: 'error' });
            }
        },

        // 导出风险评估结果
        exportAssessmentData() {
            try {
                // 准备导出数据
                const exportData = this.assessmentList.map(assessment => ({
                    '评估编号': assessment.id,
                    '评估名称': assessment.name,
                    '评估类型': assessment.type,
                    '评估状态': assessment.status,
                    '评估结果': assessment.result,
                    '评估时间': assessment.date,
                    '评估人员': assessment.assessor
                }));

                // 创建CSV内容
                const headers = Object.keys(exportData[0] || {});
                const csvContent = [
                    headers.join(','),
                    ...exportData.map(row => headers.map(header => `"${row[header] || ''}"`).join(','))
                ].join('\n');

                // 创建并下载文件
                const blob = new Blob(['\uFEFF' + csvContent], { type: 'text/csv;charset=utf-8;' });
                const link = document.createElement('a');
                const url = URL.createObjectURL(blob);
                link.setAttribute('href', url);
                link.setAttribute('download', `风险评估结果_${new Date().toISOString().split('T')[0]}.csv`);
                link.style.visibility = 'hidden';
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);

                ElMessageBox.alert('风险评估结果导出成功！', '提示', { type: 'success' });
            } catch (error) {
                ElMessageBox.alert('导出失败，请重试！', '提示', { type: 'error' });
            }
        },

        // 导出风险控制措施数据
        exportControlData() {
            try {
                // 准备导出数据
                const exportData = this.controlList.map(control => ({
                    '风险描述': control.risk,
                    '风险区域': control.area,
                    '风险等级': control.level,
                    '控制措施': control.measure,
                    '负责部门': control.department,
                    '负责人': control.responsible,
                    '截止日期': control.deadline,
                    '执行状态': control.status
                }));

                // 创建CSV内容
                const headers = Object.keys(exportData[0] || {});
                const csvContent = [
                    headers.join(','),
                    ...exportData.map(row => headers.map(header => `"${row[header] || ''}"`).join(','))
                ].join('\n');

                // 创建并下载文件
                const blob = new Blob(['\uFEFF' + csvContent], { type: 'text/csv;charset=utf-8;' });
                const link = document.createElement('a');
                const url = URL.createObjectURL(blob);
                link.setAttribute('href', url);
                link.setAttribute('download', `风险控制措施_${new Date().toISOString().split('T')[0]}.csv`);
                link.style.visibility = 'hidden';
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);

                ElMessageBox.alert('风险控制措施导出成功！', '提示', { type: 'success' });
            } catch (error) {
                ElMessageBox.alert('导出失败，请重试！', '提示', { type: 'error' });
            }
        },

        // 分页方法
        // 风险识别分页
        changeRiskPage(page) {
            this.pagination.risk.currentPage = page;
        },
        changeRiskPageSize(size) {
            this.pagination.risk.pageSize = size;
            this.pagination.risk.currentPage = 1;
        },

        // 风险评估分页
        changeAssessmentPage(page) {
            this.pagination.assessment.currentPage = page;
        },
        changeAssessmentPageSize(size) {
            this.pagination.assessment.pageSize = size;
            this.pagination.assessment.currentPage = 1;
        },

        // 风险控制分页
        changeControlPage(page) {
            this.pagination.control.currentPage = page;
        },
        changeControlPageSize(size) {
            this.pagination.control.pageSize = size;
            this.pagination.control.currentPage = 1;
        }
    },
    watch: {
        activeTab(newTab, oldTab) {
            if (newTab === 'assessment') {
                this.$nextTick(() => {
                    // 增加微小延迟，确保容器已计算尺寸
                    setTimeout(() => {
                        this.initRiskMatrixChart();
                    }, 100);
                });
            }
        }
    }
}
</script>
<style scoped>
/* 自定义样式 */
/* 限制所有Font Awesome图标的大小 */
.fas,
.far,
.fab {
    font-size: 1rem !important;
    max-width: 1rem !important;
    max-height: 1rem !important;
}

.toggle-checkbox:checked {
    right: 0;
    border-color: #3182ce;
}

.toggle-checkbox:checked+.toggle-label {
    background-color: #3182ce;
}

.toggle-label {
    transition: background-color 0.3s ease;
}

/* 隐藏input number的箭头 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
}

/* 自定义选择器样式 */
select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236B7280' d='M6 8.825L1.175 4 2.05 3.125 6 7.075 9.95 3.125 10.825 4 6 8.825z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 0.75rem;
    padding-right: 2rem;
}

/* 隐藏可能的loading效果 */
.el-loading-mask,
.el-loading-spinner,
.loading-overlay,
.loading-spinner,
[class*="loading"],
[class*="spinner"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* 隐藏可能的loading覆盖层，但保留模态框 */
.fixed.inset-0.bg-black:not([class*="modal"]):not([v-if]):not([class*="bg-opacity"]),
div[style*="position: fixed"][style*="inset: 0"]:not([class*="modal"]):not([v-if]) {
    display: none !important;
}
</style>